/* Intelligent Workflow */
.workflow-page {
    --wf-bg: #050c19;
    --wf-panel: rgba(8, 25, 48, .82);
    --wf-border: rgba(68, 155, 226, .30);
    --wf-cyan: #00dcff;
    --wf-blue: #3887ff;
    --wf-green: #28f0b2;
    color: #f4f8ff;
    background: var(--wf-bg);
    overflow: hidden;
}

.wf-hero {
    position: relative;
    min-height: 760px;
    padding: 118px 0 92px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 38%, rgba(0, 220, 255, .11), transparent 32%),
        radial-gradient(circle at 20% 20%, rgba(78, 89, 255, .12), transparent 30%),
        linear-gradient(180deg, #061124 0%, #050c19 100%);
}

.wf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(83, 158, 224, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(83, 158, 224, .12) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, transparent 2%, #000 25%, #000 80%, transparent);
}

.wf-hero-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    right: 10%;
    top: 22%;
    border-radius: 50%;
    background: rgba(0, 220, 255, .09);
    filter: blur(90px);
    animation: wfGlowMove 7s ease-in-out infinite alternate;
    pointer-events: none;
}

.wf-hero .container,
.wf-definition .container {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 48px), 1320px);
    margin: 0 auto;
}

.wf-hero-layout {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 68px;
    align-items: center;
}

.wf-eyebrow {
    display: inline-block;
    margin-bottom: 24px;
    color: var(--wf-cyan);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
}

.wf-copy h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.wf-copy h1 em {
    display: block;
    color: transparent;
    font-style: normal;
    background: linear-gradient(90deg, #fff 0%, #62e9ff 48%, #7285ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.wf-lead {
    max-width: 590px;
    margin: 28px 0 0;
    color: #93bde9;
    font-size: 17px;
    line-height: 1.9;
}

.wf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.wf-btn {
    display: inline-flex;
    min-height: 48px;
    padding: 0 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    color: #ddecff;
    text-decoration: none;
    transition: .25s ease;
}

.wf-btn-primary {
    color: #04101d;
    border-color: transparent;
    background: linear-gradient(90deg, var(--wf-cyan), #64a4ff);
    font-weight: 700;
}

.wf-btn:hover {
    transform: translateY(-2px);
    border-color: var(--wf-cyan);
}

.wf-points {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
    color: #759bc6;
    font-size: 13px;
}

.wf-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wf-points span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--wf-green);
    box-shadow: 0 0 12px var(--wf-green);
}

/* Workflow canvas */
.wf-canvas {
    position: relative;
    padding: 20px;
    border: 1px solid var(--wf-border);
    border-radius: 22px;
    background: rgba(4, 16, 33, .75);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
    backdrop-filter: blur(12px);
}

.wf-canvas-head,
.wf-canvas-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #668db6;
    font-size: 12px;
}

.wf-canvas-head strong {
    color: #dcecff;
    font-size: 13px;
}

.wf-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wf-green);
}

.wf-live::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wf-green);
    box-shadow: 0 0 14px var(--wf-green);
    animation: wfPulse 1.8s ease-in-out infinite;
}

.wf-flow-stage {
    position: relative;
    height: 430px;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid rgba(65, 143, 205, .18);
    border-radius: 16px;
    background:
        linear-gradient(rgba(65, 143, 205, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 143, 205, .08) 1px, transparent 1px),
        rgba(5, 18, 37, .80);
    background-size: 42px 42px;
}

.wf-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wf-line-base {
    fill: none;
    stroke: rgba(74, 141, 204, .30);
    stroke-width: 1.3;
}

.wf-line-active {
    fill: none;
    stroke: url("#wfGradient");
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 6 13;
    filter: drop-shadow(0 0 5px rgba(0, 220, 255, .75));
    animation: wfLineFlow 1.2s linear infinite;
}

.wf-particle {
    fill: #fff;
    filter: drop-shadow(0 0 7px #00dcff);
}

.wf-node {
    position: absolute;
    z-index: 3;
    width: 132px;
    min-height: 74px;
    padding: 13px 14px;
    border: 1px solid rgba(69, 153, 221, .38);
    border-radius: 12px;
    background: rgba(8, 30, 57, .94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    transform: translate(-50%, -50%);
    animation: wfNodeBreath 4s ease-in-out infinite;
}

.wf-node:nth-of-type(2) { animation-delay: .5s; }
.wf-node:nth-of-type(3) { animation-delay: 1s; }
.wf-node:nth-of-type(4) { animation-delay: 1.5s; }
.wf-node:nth-of-type(5) { animation-delay: 2s; }

.wf-node small {
    display: block;
    margin-bottom: 7px;
    color: var(--wf-cyan);
    font-size: 10px;
    letter-spacing: .1em;
}

.wf-node strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
}

.wf-node span {
    display: block;
    margin-top: 5px;
    color: #6f98c5;
    font-size: 11px;
}

.wf-node-trigger { top: 50%; left: 13%; }
.wf-node-judge { top: 50%; left: 39%; }
.wf-node-human { top: 25%; left: 67%; }
.wf-node-auto { top: 75%; left: 67%; }
.wf-node-finish { top: 50%; left: 89%; }

.wf-node-judge {
    border-color: rgba(120, 111, 255, .58);
}

.wf-node-finish {
    border-color: rgba(40, 240, 178, .52);
    box-shadow: 0 0 32px rgba(40, 240, 178, .10);
}

.wf-branch-label {
    position: absolute;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 10px;
    color: #82a8ce;
    background: #081b34;
    font-size: 10px;
}

.wf-branch-yes { left: 51%; top: 30%; }
.wf-branch-no { left: 51%; top: 67%; }

.wf-canvas-footer {
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.wf-canvas-footer span {
    padding-right: 16px;
    border-right: 1px solid rgba(89, 150, 204, .22);
}

.wf-canvas-footer span:last-child {
    border-right: 0;
}

/* Definition */
.wf-definition {
    padding: 110px 0;
    border-top: 1px solid rgba(68, 145, 207, .18);
    background: #081a32;
    text-align: center;
}

.wf-definition h2 {
    margin: 0 auto 25px;
    max-width: 800px;
    color: #fff;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.2;
}

.wf-definition p {
    max-width: 780px;
    margin: 0 auto;
    color: #89b0d8;
    font-size: 17px;
    line-height: 2;
}

/* Animation */
@keyframes wfLineFlow {
    to { stroke-dashoffset: -38; }
}

@keyframes wfPulse {
    0%, 100% { opacity: .55; transform: scale(.82); }
    50% { opacity: 1; transform: scale(1.25); }
}

@keyframes wfNodeBreath {
    0%, 100% {
        border-color: rgba(69, 153, 221, .30);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    }
    50% {
        border-color: rgba(0, 220, 255, .66);
        box-shadow: 0 0 25px rgba(0, 220, 255, .11);
    }
}

@keyframes wfGlowMove {
    from { transform: translate3d(-20px, -16px, 0) scale(.92); }
    to { transform: translate3d(32px, 20px, 0) scale(1.12); }
}

/* Light mode */
html[data-theme="light"] .workflow-page {
    --wf-bg: #f3f8ff;
    --wf-panel: rgba(255, 255, 255, .90);
    color: #10233d;
    background: #f3f8ff;
}

html[data-theme="light"] .wf-hero {
    background:
        radial-gradient(circle at 78% 38%, rgba(0, 180, 220, .12), transparent 32%),
        linear-gradient(180deg, #f8fbff, #eaf3ff);
}

html[data-theme="light"] .wf-copy h1,
html[data-theme="light"] .wf-definition h2 {
    color: #10233d;
}

html[data-theme="light"] .wf-copy h1 em {
    background: linear-gradient(90deg, #12345c, #078fb3, #465ddb);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-theme="light"] .wf-canvas,
html[data-theme="light"] .wf-flow-stage {
    background-color: rgba(255, 255, 255, .88);
}

html[data-theme="light"] .wf-node {
    background: rgba(245, 250, 255, .98);
}

html[data-theme="light"] .wf-node strong,
html[data-theme="light"] .wf-canvas-head strong {
    color: #10233d;
}

html[data-theme="light"] .wf-definition {
    background: #eaf3ff;
}

/* Responsive */
@media (max-width: 1050px) {
    .wf-hero-layout {
        grid-template-columns: 1fr;
    }

    .wf-copy {
        max-width: 760px;
    }
}

@media (max-width: 720px) {
    .wf-hero {
        min-height: auto;
        padding: 90px 0 64px;
    }

    .wf-hero .container,
    .wf-definition .container {
        width: min(calc(100% - 30px), 1320px);
    }

    .wf-copy h1 {
        font-size: 43px;
    }

    .wf-canvas {
        padding: 12px;
    }

    .wf-flow-stage {
        height: 650px;
    }

    .wf-lines {
        display: none;
    }

    .wf-node {
        left: 50%;
        width: min(280px, calc(100% - 36px));
        min-height: 68px;
    }

    .wf-node-trigger { top: 11%; }
    .wf-node-judge { top: 30%; }
    .wf-node-human { top: 49%; }
    .wf-node-auto { top: 68%; }
    .wf-node-finish { top: 87%; }

    .wf-node::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 48px;
        left: 50%;
        top: calc(100% + 1px);
        background: linear-gradient(var(--wf-cyan), transparent);
        animation: wfPulse 1.6s ease-in-out infinite;
    }

    .wf-node-finish::after,
    .wf-branch-label {
        display: none;
    }

    .wf-definition {
        padding: 75px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wf-hero-glow,
    .wf-line-active,
    .wf-live::before,
    .wf-node,
    .wf-node::after {
        animation: none !important;
    }

    .wf-particle {
        display: none;
    }
}
/* Workflow animation visibility fix */
.workflow-page .wf-line-active {
    stroke: #00dcff !important;
    stroke-width: 2.6px !important;
    stroke-dasharray: 5 14 !important;
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 4px #00dcff)
        drop-shadow(0 0 10px rgba(0, 220, 255, .75)) !important;
    animation: wfForcedLineFlow 1.15s linear infinite !important;
}

.workflow-page .wf-particle {
    display: block !important;
    opacity: 1 !important;
    fill: #ffffff !important;
    filter:
        drop-shadow(0 0 4px #ffffff)
        drop-shadow(0 0 10px #00dcff) !important;
}

.workflow-page .wf-node {
    animation: wfForcedNodeFlow 6s ease-in-out infinite !important;
}

.workflow-page .wf-node-trigger {
    animation-delay: 0s !important;
}

.workflow-page .wf-node-judge {
    animation-delay: 1.1s !important;
}

.workflow-page .wf-node-human {
    animation-delay: 2.2s !important;
}

.workflow-page .wf-node-auto {
    animation-delay: 3.3s !important;
}

.workflow-page .wf-node-finish {
    animation-delay: 4.4s !important;
}

.workflow-page .wf-live::before {
    animation: wfForcedStatusPulse 1.5s ease-in-out infinite !important;
}

@keyframes wfForcedLineFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -38;
    }
}

@keyframes wfForcedNodeFlow {
    0%, 14%, 100% {
        border-color: rgba(69, 153, 221, .30);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
        transform: translate(-50%, -50%) scale(1);
    }

    5%, 9% {
        border-color: #00dcff;
        box-shadow:
            0 0 8px rgba(0, 220, 255, .85),
            0 0 28px rgba(0, 220, 255, .42),
            inset 0 0 18px rgba(0, 220, 255, .08);
        transform: translate(-50%, -50%) scale(1.025);
    }
}

@keyframes wfForcedStatusPulse {
    0%, 100% {
        opacity: .45;
        transform: scale(.75);
        box-shadow: 0 0 5px #28f0b2;
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
        box-shadow: 0 0 16px #28f0b2;
    }
}
/* Hero left content typography enhancement */
@media (min-width: 1051px) {
    .workflow-page .wf-copy h1 {
        font-size: 62px !important;
        line-height: 1.12 !important;
        letter-spacing: -.035em !important;
    }

    .workflow-page .wf-lead {
        max-width: 610px !important;
        font-size: 18px !important;
        line-height: 1.85 !important;
    }

    .workflow-page .wf-points {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
}

.workflow-page .wf-actions a {
    display: inline-flex !important;
    min-height: 48px;
    padding: 0 23px !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(60, 167, 230, .38);
    border-radius: 8px;
    color: #dceeff !important;
    background: rgba(7, 28, 54, .78);
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.workflow-page .wf-actions a:first-child {
    color: #04121e !important;
    border-color: transparent;
    background: linear-gradient(90deg, #00dcff, #66a2ff);
    box-shadow: 0 10px 28px rgba(0, 190, 255, .18);
}

.workflow-page .wf-actions a:hover {
    transform: translateY(-2px);
    border-color: #00dcff;
    box-shadow: 0 10px 28px rgba(0, 220, 255, .16);
}

@media (max-width: 720px) {
    .workflow-page .wf-copy h1 {
        font-size: 42px !important;
        line-height: 1.15 !important;
    }

    .workflow-page .wf-lead {
        font-size: 16px !important;
    }
}
/* Exact hero typography fix */
.workflow-page .wf-hero-copy {
    position: relative;
    z-index: 3;
}

.workflow-page .wf-hero-copy h1 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(48px, 3.45vw, 66px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.04em !important;
}

.workflow-page .wf-hero-copy h1 em {
    display: block;
    color: transparent !important;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #55e6ff 48%, #7187ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.workflow-page .wf-hero-copy > p {
    max-width: 620px;
    margin: 27px 0 0 !important;
    color: #a3c7ec !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
}

.workflow-page .wf-hero-actions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 14px !important;
    margin-top: 32px !important;
}

.workflow-page .wf-button {
    display: inline-flex !important;
    min-height: 50px;
    padding: 0 24px !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(74, 171, 231, .42);
    border-radius: 8px;
    color: #dceeff !important;
    background: rgba(8, 29, 55, .82);
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: .25s ease;
}

.workflow-page .wf-button-primary {
    color: #04121e !important;
    border-color: transparent;
    background: linear-gradient(90deg, #00dcff, #65a4ff);
    box-shadow: 0 12px 30px rgba(0, 198, 255, .20);
}

.workflow-page .wf-button:hover {
    transform: translateY(-2px);
    border-color: #00dcff;
    box-shadow: 0 12px 30px rgba(0, 220, 255, .16);
}

.workflow-page .wf-hero-points {
    display: grid !important;
    gap: 10px !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.workflow-page .wf-hero-points li {
    position: relative;
    padding-left: 19px !important;
    color: #91b7df !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.workflow-page .wf-hero-points li::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    left: 0;
    top: .68em;
    border-radius: 50%;
    background: #28f0b2;
    box-shadow: 0 0 12px rgba(40, 240, 178, .85);
}

@media (max-width: 720px) {
    .workflow-page .wf-hero-copy h1 {
        font-size: 42px !important;
    }

    .workflow-page .wf-hero-copy > p {
        font-size: 16px !important;
    }

    .workflow-page .wf-hero-actions {
        flex-direction: column;
    }

    .workflow-page .wf-button {
        width: 100%;
    }
}

/* =========================================================
   Intelligent Workflow：浅色标题与六项核心能力
   ========================================================= */

html[data-theme="light"] .wf-hero-copy h1,
html[data-theme="light"] .wf-hero-copy h1 span {
    color: #10233e !important;
}

.wf-capabilities {
    position: relative;
    padding: clamp(90px, 9vw, 150px) 0;
    overflow: hidden;
    border-top: 1px solid rgba(45, 139, 210, .14);
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 210, 255, .09), transparent 38%),
        var(--surface, #071426);
}

.wf-capabilities::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -260px;
    top: 120px;
    border: 1px solid rgba(0, 216, 255, .12);
    border-radius: 50%;
    box-shadow:
        0 0 0 80px rgba(0, 216, 255, .025),
        0 0 0 160px rgba(82, 75, 255, .018);
    pointer-events: none;
}

.wf-section-heading {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto 58px;
    text-align: center;
}

.wf-section-heading h2 {
    margin: 17px 0 20px;
    color: var(--text, #f5f9ff);
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.15;
    letter-spacing: -.045em;
}

.wf-section-heading p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--muted, #8fa1b8);
    font-size: 16px;
    line-height: 1.9;
}

.wf-capability-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.wf-capability-card {
    position: relative;
    min-height: 300px;
    padding: 31px 30px 27px;
    overflow: hidden;
    border: 1px solid rgba(63, 148, 218, .18);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(11, 35, 62, .86), rgba(5, 20, 39, .94));
    box-shadow: 0 24px 70px rgba(0, 8, 24, .16);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.wf-capability-card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 216, 255, .48);
    box-shadow:
        0 28px 80px rgba(0, 12, 34, .28),
        0 0 35px rgba(0, 216, 255, .08);
}

.wf-capability-number {
    position: absolute;
    top: 27px;
    right: 27px;
    color: rgba(121, 166, 207, .34);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
}

.wf-capability-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 216, 255, .34);
    border-radius: 14px;
    color: #00ddff;
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(
        145deg,
        rgba(0, 216, 255, .14),
        rgba(83, 75, 255, .10)
    );
    box-shadow: inset 0 0 25px rgba(0, 216, 255, .04);
}

.wf-capability-card h3 {
    margin: 0 0 14px;
    color: #f4f8ff;
    font-size: 21px;
    line-height: 1.35;
}

.wf-capability-card p {
    margin: 0;
    color: #92a4b9;
    font-size: 14px;
    line-height: 1.85;
}

.wf-capability-tag {
    position: absolute;
    left: 30px;
    bottom: 25px;
    color: rgba(0, 216, 255, .58);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

.wf-capability-summary {
    position: relative;
    z-index: 1;
    max-width: 940px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 46px auto 0;
    color: var(--muted, #91a3ba);
    font-size: 13px;
    letter-spacing: .08em;
}

.wf-capability-summary i {
    width: 75px;
    height: 1px;
    margin: 0 15px;
    background: linear-gradient(
        90deg,
        rgba(0, 216, 255, .12),
        rgba(0, 216, 255, .72),
        rgba(0, 216, 255, .12)
    );
}

html[data-theme="light"] .wf-capabilities {
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 199, 232, .10), transparent 40%),
        #f4f8ff;
}

html[data-theme="light"] .wf-section-heading h2 {
    color: #10233e;
}

html[data-theme="light"] .wf-section-heading p {
    color: #6d819a;
}

html[data-theme="light"] .wf-capability-card {
    border-color: rgba(41, 122, 184, .18);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 247, 255, .96));
    box-shadow: 0 22px 60px rgba(37, 87, 128, .10);
}

html[data-theme="light"] .wf-capability-card h3 {
    color: #11243e;
}

html[data-theme="light"] .wf-capability-card p {
    color: #667c95;
}

@media (max-width: 920px) {
    .wf-capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .wf-capabilities {
        padding: 76px 0;
    }

    .wf-section-heading {
        margin-bottom: 38px;
        text-align: left;
    }

    .wf-capability-grid {
        grid-template-columns: 1fr;
    }

    .wf-capability-card {
        min-height: 270px;
    }

    .wf-capability-summary {
        flex-wrap: wrap;
        gap: 10px;
    }

    .wf-capability-summary i {
        width: 24px;
        margin: 0 3px;
    }
}

/* 六项核心能力内容宽度精修 */
.wf-capabilities .container {
    width: min(1380px, calc(100% - 72px));
    margin-right: auto;
    margin-left: auto;
}

.wf-capability-grid {
    gap: 20px;
}

.wf-capability-card {
    min-height: 270px;
    padding: 28px 28px 25px;
}

.wf-capability-card p {
    max-width: 380px;
}

@media (max-width: 920px) {
    .wf-capabilities .container {
        width: min(100% - 40px, 760px);
    }
}

@media (max-width: 620px) {
    .wf-capabilities .container {
        width: calc(100% - 32px);
    }
}


/* =========================================================
   Intelligent Workflow：企业典型应用场景
   ========================================================= */

.wf-scenarios {
    position: relative;
    padding: clamp(90px, 9vw, 150px) 0;
    overflow: hidden;
    border-top: 1px solid rgba(53, 143, 213, .14);
    background:
        linear-gradient(115deg, rgba(4, 20, 39, .98), rgba(5, 27, 51, .96));
}

.wf-scenarios .container {
    width: min(1380px, calc(100% - 72px));
    margin-right: auto;
    margin-left: auto;
}

.wf-scenarios-layout {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(620px, 1.28fr);
    gap: clamp(60px, 7vw, 120px);
    align-items: start;
}

.wf-scenarios-intro {
    position: sticky;
    top: 120px;
}

.wf-scenarios-intro h2 {
    max-width: 470px;
    margin: 18px 0 23px;
    color: #f4f8ff;
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.12;
    letter-spacing: -.05em;
}

.wf-scenarios-intro > p {
    max-width: 500px;
    margin: 0;
    color: #91a5bc;
    font-size: 15px;
    line-height: 1.95;
}

.wf-scenarios-standard {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 34px;
}

.wf-scenarios-standard strong {
    flex-basis: 100%;
    margin-bottom: 7px;
    color: #dce9f8;
    font-size: 14px;
}

.wf-scenarios-standard span {
    padding: 7px 11px;
    border: 1px solid rgba(0, 216, 255, .20);
    border-radius: 999px;
    color: #83a1bd;
    font-size: 11px;
    background: rgba(0, 216, 255, .035);
}

.wf-scenario-list {
    border-top: 1px solid rgba(72, 159, 223, .18);
}

.wf-scenario-item {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(280px, 1fr) auto;
    gap: 22px;
    align-items: center;
    min-height: 152px;
    padding: 27px 8px;
    border-bottom: 1px solid rgba(72, 159, 223, .18);
    transition:
        padding .3s ease,
        background .3s ease;
}

.wf-scenario-item:hover {
    padding-right: 20px;
    padding-left: 20px;
    background: linear-gradient(
        90deg,
        rgba(0, 216, 255, .035),
        rgba(74, 70, 255, .025)
    );
}

.wf-scenario-index {
    color: rgba(0, 216, 255, .62);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
}

.wf-scenario-item h3 {
    margin: 0 0 9px;
    color: #f3f8ff;
    font-size: 20px;
    line-height: 1.35;
}

.wf-scenario-item p {
    max-width: 590px;
    margin: 0;
    color: #879bb3;
    font-size: 13px;
    line-height: 1.8;
}

.wf-scenario-path {
    color: #59a9c7;
    font-size: 11px;
    line-height: 1.7;
    text-align: right;
    white-space: nowrap;
}

html[data-theme="light"] .wf-scenarios {
    background:
        linear-gradient(115deg, #f8fbff, #edf6ff);
}

html[data-theme="light"] .wf-scenarios-intro h2,
html[data-theme="light"] .wf-scenario-item h3 {
    color: #10233e;
}

html[data-theme="light"] .wf-scenarios-intro > p,
html[data-theme="light"] .wf-scenario-item p {
    color: #697f98;
}

html[data-theme="light"] .wf-scenarios-standard strong {
    color: #243a55;
}

html[data-theme="light"] .wf-scenarios-standard span {
    color: #55728f;
    background: rgba(0, 161, 214, .05);
}

@media (max-width: 980px) {
    .wf-scenarios .container {
        width: min(100% - 40px, 780px);
    }

    .wf-scenarios-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .wf-scenarios-intro {
        position: static;
    }
}

@media (max-width: 620px) {
    .wf-scenarios {
        padding: 76px 0;
    }

    .wf-scenarios .container {
        width: calc(100% - 32px);
    }

    .wf-scenario-item {
        grid-template-columns: 34px 1fr;
        min-height: 0;
    }

    .wf-scenario-path {
        grid-column: 2;
        text-align: left;
        white-space: normal;
    }
}

/* Intelligent Workflow Comparison */
.wf-comparison {
    position: relative;
    padding: 108px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(0, 198, 255, 0.08), transparent 30%),
        #06172b;
}

.wf-comparison .container {
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-comparison-heading {
    max-width: 820px;
    margin: 0 auto 54px;
    text-align: center;
}

.wf-comparison-heading h2 {
    margin: 16px 0 18px;
    color: #f4f8ff;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.15;
}

.wf-comparison-heading p {
    margin: 0;
    color: #8fa9c7;
    font-size: 16px;
    line-height: 1.9;
}

.wf-comparison-table {
    overflow: hidden;
    border: 1px solid rgba(62, 153, 215, 0.22);
    border-radius: 24px;
    background: rgba(7, 28, 52, 0.86);
    box-shadow: 0 28px 80px rgba(0, 7, 20, 0.24);
}

.wf-comparison-row {
    display: grid;
    grid-template-columns: 0.72fr 1fr 1.2fr;
    border-bottom: 1px solid rgba(62, 153, 215, 0.15);
}

.wf-comparison-row:last-child {
    border-bottom: 0;
}

.wf-comparison-row > div {
    min-width: 0;
    padding: 25px 28px;
    color: #9bb2cd;
    font-size: 15px;
    line-height: 1.7;
}

.wf-comparison-row > div + div {
    border-left: 1px solid rgba(62, 153, 215, 0.15);
}

.wf-comparison-row strong {
    color: #f3f8ff;
    font-size: 16px;
}

.wf-comparison-header {
    background: rgba(4, 19, 37, 0.9);
}

.wf-comparison-header > div {
    color: #f4f8ff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.wf-comparison-row .wf-comparison-highlight {
    color: #dbeeff;
    background: linear-gradient(90deg, rgba(0, 198, 255, 0.07), rgba(77, 83, 255, 0.05));
}

.wf-comparison-header .wf-comparison-highlight {
    color: #13d8ff;
}

.wf-comparison-note {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 24px;
    padding: 25px 28px;
    border: 1px solid rgba(0, 198, 255, 0.24);
    border-radius: 18px;
    background: rgba(0, 198, 255, 0.055);
}

.wf-comparison-note span {
    color: #10d8ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.wf-comparison-note p {
    margin: 0;
    color: #a9bdd4;
    font-size: 15px;
    line-height: 1.8;
}

html[data-theme="light"] .wf-comparison {
    background:
        radial-gradient(circle at 88% 18%, rgba(0, 144, 214, 0.08), transparent 30%),
        #f3f8fc;
}

html[data-theme="light"] .wf-comparison-heading h2,
html[data-theme="light"] .wf-comparison-row strong,
html[data-theme="light"] .wf-comparison-header > div {
    color: #10233e;
}

html[data-theme="light"] .wf-comparison-heading p,
html[data-theme="light"] .wf-comparison-row > div,
html[data-theme="light"] .wf-comparison-note p {
    color: #526b86;
}

html[data-theme="light"] .wf-comparison-table {
    border-color: rgba(22, 105, 164, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 70px rgba(31, 72, 110, 0.1);
}

html[data-theme="light"] .wf-comparison-header {
    background: #eaf3fa;
}

html[data-theme="light"] .wf-comparison-row,
html[data-theme="light"] .wf-comparison-row > div + div {
    border-color: rgba(22, 105, 164, 0.14);
}

html[data-theme="light"] .wf-comparison-row .wf-comparison-highlight {
    color: #234d70;
    background: linear-gradient(90deg, rgba(0, 170, 225, 0.08), rgba(74, 91, 255, 0.04));
}

html[data-theme="light"] .wf-comparison-header .wf-comparison-highlight,
html[data-theme="light"] .wf-comparison-note span {
    color: #008bb8;
}

html[data-theme="light"] .wf-comparison-note {
    border-color: rgba(0, 139, 184, 0.2);
    background: rgba(0, 139, 184, 0.055);
}

@media (max-width: 900px) {
    .wf-comparison {
        padding: 78px 0;
    }

    .wf-comparison .container {
        width: min(100% - 36px, 1380px);
    }

    .wf-comparison-table {
        overflow-x: auto;
    }

    .wf-comparison-row {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .wf-comparison-heading {
        margin-bottom: 36px;
        text-align: left;
    }

    .wf-comparison-heading h2 {
        font-size: 32px;
    }

    .wf-comparison-note {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 22px;
    }
}

/* Intelligent Workflow Delivery Process */
.wf-delivery {
    position: relative;
    padding: 112px 0;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(5, 20, 39, 0.98), rgba(8, 30, 55, 0.96)),
        #06162a;
}

.wf-delivery::before {
    position: absolute;
    top: 8%;
    left: -170px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(0, 202, 255, 0.12);
    border-radius: 50%;
    content: "";
}

.wf-delivery .container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(520px, 1.22fr);
    gap: clamp(60px, 8vw, 130px);
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-delivery-intro {
    position: sticky;
    top: 120px;
    align-self: start;
}

.wf-delivery-intro h2 {
    max-width: 520px;
    margin: 18px 0 24px;
    color: #f4f8ff;
    font-size: clamp(38px, 4.5vw, 62px);
    line-height: 1.12;
}

.wf-delivery-intro > p {
    max-width: 520px;
    margin: 0;
    color: #91a9c4;
    font-size: 16px;
    line-height: 1.9;
}

.wf-delivery-result {
    margin-top: 42px;
    padding: 24px 26px;
    border: 1px solid rgba(0, 202, 255, 0.22);
    border-radius: 18px;
    background: rgba(0, 202, 255, 0.055);
}

.wf-delivery-result span {
    display: block;
    margin-bottom: 10px;
    color: #10d8ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.wf-delivery-result strong {
    display: block;
    color: #eaf6ff;
    font-size: 17px;
    line-height: 1.65;
}

.wf-delivery-steps {
    position: relative;
}

.wf-delivery-steps::before {
    position: absolute;
    top: 38px;
    bottom: 38px;
    left: 31px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(0, 216, 255, 0.12),
        rgba(0, 216, 255, 0.72),
        rgba(99, 83, 255, 0.2)
    );
    content: "";
}

.wf-delivery-step {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 26px;
    padding: 0 0 48px;
}

.wf-delivery-step:last-child {
    padding-bottom: 0;
}

.wf-delivery-number {
    position: relative;
    z-index: 2;
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 210, 255, 0.46);
    border-radius: 18px;
    color: #12d9ff;
    background: #071c33;
    box-shadow: 0 0 28px rgba(0, 202, 255, 0.09);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wf-delivery-content {
    padding: 3px 0 42px;
    border-bottom: 1px solid rgba(69, 139, 194, 0.17);
}

.wf-delivery-step:last-child .wf-delivery-content {
    padding-bottom: 0;
    border-bottom: 0;
}

.wf-delivery-content > span {
    display: block;
    margin-bottom: 9px;
    color: #079fcb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.wf-delivery-content h3 {
    margin: 0 0 13px;
    color: #f4f8ff;
    font-size: 25px;
    line-height: 1.35;
}

.wf-delivery-content p {
    max-width: 660px;
    margin: 0;
    color: #8fa8c3;
    font-size: 15px;
    line-height: 1.85;
}

html[data-theme="light"] .wf-delivery {
    background:
        linear-gradient(115deg, rgba(244, 249, 253, 0.98), rgba(232, 244, 251, 0.96)),
        #f2f8fc;
}

html[data-theme="light"] .wf-delivery-intro h2,
html[data-theme="light"] .wf-delivery-result strong,
html[data-theme="light"] .wf-delivery-content h3 {
    color: #10233e;
}

html[data-theme="light"] .wf-delivery-intro > p,
html[data-theme="light"] .wf-delivery-content p {
    color: #526c87;
}

html[data-theme="light"] .wf-delivery-result {
    border-color: rgba(0, 139, 184, 0.2);
    background: rgba(0, 139, 184, 0.055);
}

html[data-theme="light"] .wf-delivery-result span,
html[data-theme="light"] .wf-delivery-content > span {
    color: #008db8;
}

html[data-theme="light"] .wf-delivery-number {
    border-color: rgba(0, 139, 184, 0.3);
    color: #008db8;
    background: #f7fbfe;
    box-shadow: 0 12px 30px rgba(31, 90, 130, 0.08);
}

html[data-theme="light"] .wf-delivery-content {
    border-color: rgba(22, 105, 164, 0.14);
}

@media (max-width: 980px) {
    .wf-delivery {
        padding: 82px 0;
    }

    .wf-delivery .container {
        grid-template-columns: 1fr;
        gap: 58px;
        width: min(100% - 36px, 1380px);
    }

    .wf-delivery-intro {
        position: static;
    }

    .wf-delivery-intro h2,
    .wf-delivery-intro > p {
        max-width: 760px;
    }

    .wf-delivery-result {
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .wf-delivery-intro h2 {
        font-size: 34px;
    }

    .wf-delivery-step {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        padding-bottom: 38px;
    }

    .wf-delivery-number {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        font-size: 12px;
    }

    .wf-delivery-steps::before {
        left: 24px;
    }

    .wf-delivery-content {
        padding-bottom: 32px;
    }

    .wf-delivery-content h3 {
        font-size: 21px;
    }
}

/* Workflow Boundaries */
.wf-boundaries {
    padding: 112px 0;
    background:
        radial-gradient(circle at 50% 110%, rgba(78,66,255,.12), transparent 38%),
        #041326;
}

.wf-boundaries .container {
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-boundaries-heading {
    max-width: 830px;
    margin: 0 auto 58px;
    text-align: center;
}

.wf-boundaries-heading h2 {
    margin: 17px 0 20px;
    color: #f4f8ff;
    font-size: clamp(38px, 4.5vw, 60px);
    line-height: 1.14;
}

.wf-boundaries-heading p {
    color: #91a9c5;
    font-size: 16px;
    line-height: 1.9;
}

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

.wf-boundary-card {
    min-height: 450px;
    padding: 30px;
    border: 1px solid rgba(64,148,211,.22);
    border-radius: 24px;
    background: rgba(7,29,53,.86);
}

.wf-boundary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}

.wf-boundary-icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,211,255,.42);
    border-radius: 14px;
    color: #12dcff;
    background: rgba(0,205,255,.07);
    font-size: 19px;
    font-weight: 800;
}

.wf-boundary-human .wf-boundary-icon {
    border-color: rgba(106,104,255,.42);
    color: #9997ff;
}

.wf-boundary-exception .wf-boundary-icon {
    border-color: rgba(255,171,73,.42);
    color: #ffb45e;
}

.wf-boundary-index {
    color: rgba(124,171,211,.45);
    font-weight: 800;
}

.wf-boundary-label {
    display: block;
    margin-bottom: 10px;
    color: #079fc9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.wf-boundary-card h3 {
    margin: 0 0 14px;
    color: #f3f8ff;
    font-size: 27px;
}

.wf-boundary-card > p {
    min-height: 82px;
    margin: 0 0 24px;
    color: #8fa8c3;
    font-size: 15px;
    line-height: 1.8;
}

.wf-boundary-card ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-boundary-card li {
    position: relative;
    padding-left: 20px;
    color: #bbcade;
    font-size: 14px;
    line-height: 1.6;
}

.wf-boundary-card li::before {
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #09cdef;
    content: "";
}

.wf-boundary-principle {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: center;
    margin-top: 22px;
    padding: 30px 34px;
    border: 1px solid rgba(0,204,255,.2);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(0,198,255,.07), rgba(77,70,255,.045));
}

.wf-boundary-principle span {
    display: block;
    margin-bottom: 9px;
    color: #10d8ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wf-boundary-principle strong {
    color: #f2f8ff;
    font-size: 22px;
    line-height: 1.5;
}

.wf-boundary-principle p {
    margin: 0;
    color: #9bb0c9;
    font-size: 15px;
    line-height: 1.85;
}

html[data-theme="light"] .wf-boundaries {
    background: #f4f9fc;
}

html[data-theme="light"] .wf-boundaries-heading h2,
html[data-theme="light"] .wf-boundary-card h3,
html[data-theme="light"] .wf-boundary-principle strong {
    color: #10233e;
}

html[data-theme="light"] .wf-boundaries-heading p,
html[data-theme="light"] .wf-boundary-card > p,
html[data-theme="light"] .wf-boundary-principle p {
    color: #526c87;
}

html[data-theme="light"] .wf-boundary-card {
    border-color: rgba(22,105,164,.16);
    background: rgba(255,255,255,.92);
}

html[data-theme="light"] .wf-boundary-card li {
    color: #405b76;
}

@media (max-width: 980px) {
    .wf-boundaries {
        padding: 82px 0;
    }

    .wf-boundaries .container {
        width: min(100% - 36px, 1380px);
    }

    .wf-boundaries-grid {
        grid-template-columns: 1fr;
    }

    .wf-boundary-card {
        min-height: 0;
    }

    .wf-boundary-card > p {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .wf-boundaries-heading {
        text-align: left;
    }

    .wf-boundaries-heading h2 {
        font-size: 34px;
    }

    .wf-boundary-principle {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 25px;
    }
}

/* Intelligent Workflow Related Case */
.wf-case {
    position: relative;
    padding: 112px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 38%, rgba(0, 201, 255, .1), transparent 31%),
        #07182c;
}

.wf-case .container {
    display: grid;
    grid-template-columns: minmax(520px, 1.08fr) minmax(380px, .92fr);
    gap: clamp(60px, 7vw, 110px);
    align-items: center;
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-case-visual {
    position: relative;
    min-height: 490px;
    padding: 34px;
    border: 1px solid rgba(50, 151, 216, .24);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(9, 37, 67, .94), rgba(5, 23, 43, .96));
    box-shadow: 0 30px 80px rgba(0, 7, 20, .25);
}

.wf-case-status {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: #9eb7d1;
    font-size: 12px;
    letter-spacing: .08em;
}

.wf-case-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16d6ff;
    box-shadow: 0 0 14px rgba(22, 214, 255, .75);
}

.wf-case-flow {
    display: grid;
    grid-template-columns: 1fr 34px 1fr 34px 1fr;
    gap: 7px;
    align-items: center;
    margin-top: 86px;
}

.wf-case-node {
    min-width: 0;
    padding: 24px 15px;
    border: 1px solid rgba(0, 199, 255, .24);
    border-radius: 18px;
    text-align: center;
    background: rgba(0, 202, 255, .045);
}

.wf-case-node span {
    display: block;
    margin-bottom: 14px;
    color: #0dcdef;
    font-size: 11px;
    font-weight: 800;
}

.wf-case-node strong {
    display: block;
    color: #f2f8ff;
    font-size: 17px;
}

.wf-case-node small {
    display: block;
    margin-top: 8px;
    color: #7893af;
    font-size: 11px;
}

.wf-case-arrow {
    color: #118fb5;
    text-align: center;
    font-size: 22px;
}

.wf-case-output {
    margin-top: 76px;
    padding-top: 25px;
    border-top: 1px solid rgba(61, 146, 205, .18);
}

.wf-case-output > span {
    color: #078fb7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.wf-case-output > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.wf-case-output strong {
    padding: 9px 13px;
    border: 1px solid rgba(73, 151, 208, .2);
    border-radius: 999px;
    color: #a9c8df;
    font-size: 12px;
    font-weight: 600;
}

.wf-case-content h2 {
    margin: 18px 0 22px;
    color: #f4f8ff;
    font-size: clamp(38px, 4vw, 56px);
    line-height: 1.18;
}

.wf-case-lead {
    margin: 0 0 32px;
    color: #96adc7;
    font-size: 16px;
    line-height: 1.9;
}

.wf-case-points {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(61, 146, 205, .18);
}

.wf-case-points > div {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(61, 146, 205, .18);
}

.wf-case-points span {
    color: #12c9ec;
    font-size: 13px;
    font-weight: 700;
}

.wf-case-points p {
    margin: 0;
    color: #879fb9;
    font-size: 14px;
    line-height: 1.75;
}

.wf-case-link {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    margin-top: 32px;
    padding: 13px 20px;
    border: 1px solid rgba(0, 203, 255, .36);
    border-radius: 12px;
    color: #e8f8ff;
    text-decoration: none;
    transition: .25s ease;
}

.wf-case-link:hover {
    border-color: #12d8ff;
    background: rgba(0, 203, 255, .08);
    transform: translateY(-2px);
}

html[data-theme="light"] .wf-case {
    background: #edf6fb;
}

html[data-theme="light"] .wf-case-visual {
    border-color: rgba(22, 105, 164, .18);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 28px 70px rgba(31, 72, 110, .1);
}

html[data-theme="light"] .wf-case-node {
    border-color: rgba(0, 139, 184, .18);
    background: rgba(0, 139, 184, .045);
}

html[data-theme="light"] .wf-case-node strong,
html[data-theme="light"] .wf-case-content h2 {
    color: #10233e;
}

html[data-theme="light"] .wf-case-lead,
html[data-theme="light"] .wf-case-points p,
html[data-theme="light"] .wf-case-status {
    color: #526c87;
}

html[data-theme="light"] .wf-case-link {
    color: #0a5378;
}

@media (max-width: 1050px) {
    .wf-case .container {
        grid-template-columns: 1fr;
        width: min(100% - 36px, 1380px);
    }

    .wf-case-visual {
        min-height: 0;
    }
}

@media (max-width: 680px) {
    .wf-case {
        padding: 82px 0;
    }

    .wf-case-flow {
        grid-template-columns: 1fr;
        margin-top: 45px;
    }

    .wf-case-arrow {
        transform: rotate(90deg);
    }

    .wf-case-output {
        margin-top: 45px;
    }

    .wf-case-content h2 {
        font-size: 34px;
    }

    .wf-case-points > div {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Intelligent Workflow FAQ */
.wf-faq {
    position: relative;
    padding: 112px 0;
    background:
        radial-gradient(circle at 85% 12%, rgba(0, 205, 255, .08), transparent 30%),
        #041326;
}

.wf-faq .container {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr);
    gap: clamp(60px, 8vw, 130px);
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-faq-intro {
    align-self: start;
}

.wf-faq-intro h2 {
    margin: 18px 0 22px;
    color: #f4f8ff;
    font-size: clamp(38px, 4.4vw, 58px);
    line-height: 1.15;
}

.wf-faq-intro > p {
    max-width: 490px;
    margin: 0;
    color: #91a9c4;
    font-size: 16px;
    line-height: 1.9;
}

.wf-faq-contact {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    margin-top: 34px;
    padding: 13px 20px;
    border: 1px solid rgba(0, 203, 255, .34);
    border-radius: 12px;
    color: #eaf9ff;
    text-decoration: none;
    transition: .25s ease;
}

.wf-faq-contact:hover {
    border-color: #13d8ff;
    background: rgba(0, 203, 255, .08);
    transform: translateY(-2px);
}

.wf-faq-list {
    border-top: 1px solid rgba(61, 146, 205, .22);
}

.wf-faq-item {
    border-bottom: 1px solid rgba(61, 146, 205, .22);
}

.wf-faq-item summary {
    display: grid;
    grid-template-columns: 42px 1fr 26px;
    gap: 16px;
    align-items: center;
    padding: 27px 0;
    cursor: pointer;
    list-style: none;
}

.wf-faq-item summary::-webkit-details-marker {
    display: none;
}

.wf-faq-item summary > span {
    color: #078fb8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}

.wf-faq-item summary strong {
    color: #eaf3fc;
    font-size: 18px;
    line-height: 1.55;
}

.wf-faq-item summary i {
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 203, 255, .28);
    border-radius: 50%;
}

.wf-faq-item summary i::before,
.wf-faq-item summary i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: #11cdef;
    content: "";
    transform: translate(-50%, -50%);
    transition: .2s ease;
}

.wf-faq-item summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.wf-faq-item[open] summary i::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.wf-faq-answer {
    padding: 0 50px 28px 58px;
}

.wf-faq-answer p {
    margin: 0;
    color: #8fa7c1;
    font-size: 15px;
    line-height: 1.9;
}

html[data-theme="light"] .wf-faq {
    background: #f4f9fc;
}

html[data-theme="light"] .wf-faq-intro h2,
html[data-theme="light"] .wf-faq-item summary strong {
    color: #10233e;
}

html[data-theme="light"] .wf-faq-intro > p,
html[data-theme="light"] .wf-faq-answer p {
    color: #526c87;
}

html[data-theme="light"] .wf-faq-contact {
    color: #0a5378;
}

html[data-theme="light"] .wf-faq-list,
html[data-theme="light"] .wf-faq-item {
    border-color: rgba(22, 105, 164, .16);
}

@media (max-width: 980px) {
    .wf-faq {
        padding: 82px 0;
    }

    .wf-faq .container {
        grid-template-columns: 1fr;
        gap: 55px;
        width: min(100% - 36px, 1380px);
    }

    .wf-faq-intro > p {
        max-width: 720px;
    }
}

@media (max-width: 640px) {
    .wf-faq-intro h2 {
        font-size: 34px;
    }

    .wf-faq-item summary {
        grid-template-columns: 30px 1fr 24px;
        gap: 10px;
        padding: 23px 0;
    }

    .wf-faq-item summary strong {
        font-size: 16px;
    }

    .wf-faq-answer {
        padding: 0 34px 24px 40px;
    }
}

/* CAUDEX_WORKFLOW_FINAL_CTA */
.wf-final-cta {
    padding: 60px 0 112px;
    overflow: hidden;
    background: #041326;
}

.wf-final-cta .container {
    width: min(1380px, calc(100% - 72px));
    margin: 0 auto;
}

.wf-final-cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(480px, 1fr) auto;
    gap: 60px;
    align-items: center;
    padding: clamp(48px, 6vw, 82px);
    overflow: hidden;
    border: 1px solid rgba(0, 203, 255, .28);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 20%, rgba(90, 71, 255, .25), transparent 31%),
        radial-gradient(circle at 12% 110%, rgba(0, 211, 255, .18), transparent 36%),
        linear-gradient(135deg, #092542, #07182f);
    box-shadow: 0 35px 90px rgba(0, 5, 18, .32);
}

.wf-final-cta-copy {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.wf-final-cta-copy h2 {
    margin: 18px 0 22px;
    color: #f5f9ff;
    font-size: clamp(40px, 5vw, 66px);
    line-height: 1.12;
}

.wf-final-cta-copy p {
    max-width: 720px;
    margin: 0;
    color: #a1b6ce;
    font-size: 16px;
    line-height: 1.9;
}

.wf-final-cta-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 13px;
    min-width: 220px;
}

.wf-final-cta-primary,
.wf-final-cta-secondary {
    display: flex;
    gap: 14px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

.wf-final-cta-primary {
    color: #02111f;
    background: linear-gradient(100deg, #13ddff, #48a6ff);
}

.wf-final-cta-secondary {
    border: 1px solid rgba(119, 183, 228, .32);
    color: #e9f5ff;
    background: rgba(5, 22, 42, .34);
}

.wf-final-cta-primary:hover,
.wf-final-cta-secondary:hover {
    transform: translateY(-3px);
}

.wf-final-cta-meta {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 12px 26px;
    padding-top: 28px;
    border-top: 1px solid rgba(93, 164, 216, .19);
}

.wf-final-cta-meta span {
    position: relative;
    padding-left: 16px;
    color: #88a5c1;
    font-size: 13px;
}

.wf-final-cta-meta span::before {
    position: absolute;
    top: 7px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0fd8f8;
    content: "";
}

html[data-theme="light"] .wf-final-cta {
    background: #f4f9fc;
}

html[data-theme="light"] .wf-final-cta-panel {
    border-color: rgba(0, 139, 184, .2);
    background: linear-gradient(135deg, #f8fcff, #eaf5fb);
}

html[data-theme="light"] .wf-final-cta-copy h2 {
    color: #10233e;
}

html[data-theme="light"] .wf-final-cta-copy p,
html[data-theme="light"] .wf-final-cta-meta span {
    color: #526c87;
}

html[data-theme="light"] .wf-final-cta-secondary {
    border-color: rgba(22, 105, 164, .22);
    color: #174f71;
    background: rgba(255, 255, 255, .55);
}

@media (max-width: 980px) {
    .wf-final-cta {
        padding: 40px 0 82px;
    }

    .wf-final-cta .container {
        width: min(100% - 36px, 1380px);
    }

    .wf-final-cta-panel {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .wf-final-cta-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .wf-final-cta-panel {
        padding: 35px 24px;
        border-radius: 22px;
    }

    .wf-final-cta-copy h2 {
        font-size: 35px;
    }

    .wf-final-cta-actions {
        grid-template-columns: 1fr;
    }

    .wf-final-cta-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}