/* =========================================================
   AI-CRIMS LANDING WORKFLOW - CLEAN PIPELINE REDESIGN
   Scoped only to #workflow
========================================================= */

#workflow {
    position: relative !important;
    overflow: hidden !important;
    padding: 58px 0 76px !important;
    color: #f5f8ff !important;
    background:
        radial-gradient(circle at 78% 18%, rgba(0,153,255,.15), transparent 28%),
        radial-gradient(circle at 12% 84%, rgba(91,65,235,.12), transparent 32%),
        linear-gradient(135deg, #06142c 0%, #071b3b 48%, #07162f 100%) !important;
}

#workflow .workflow-bg,
#workflow .workflow-grid {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

#workflow .workflow-bg { overflow: hidden !important; }

#workflow .workflow-grid {
    background-image:
        linear-gradient(rgba(70,150,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,150,255,.045) 1px, transparent 1px) !important;
    background-size: 55px 55px !important;
    opacity: .55 !important;
}

#workflow .workflow-orb {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(85px) !important;
    pointer-events: none !important;
}

#workflow .workflow-orb-one {
    width: 420px !important;
    height: 420px !important;
    top: -230px !important;
    right: 7% !important;
    background: rgba(0,140,255,.12) !important;
}

#workflow .workflow-orb-two {
    width: 350px !important;
    height: 350px !important;
    bottom: -190px !important;
    left: -120px !important;
    background: rgba(103,65,235,.12) !important;
}

#workflow .workflow-container { position: relative !important; z-index: 1 !important; }

/* =========================================================
   INTRO
========================================================= */
#workflow .workflow-intro {
    width: min(1180px, 92%) !important;
    margin: 0 auto 46px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(470px, .95fr) !important;
    align-items: center !important;
    gap: 48px !important;
}

#workflow .workflow-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 13px !important;
    margin-bottom: 18px !important;
    border: 1px solid rgba(27,190,255,.55) !important;
    border-radius: 999px !important;
    background: rgba(5,35,73,.58) !important;
    color: #32c5ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1.3px !important;
}

#workflow .workflow-tag-icon {
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(31,190,255,.12) !important;
}

#workflow .workflow-copy h2 {
    max-width: 620px !important;
    margin: 0 !important;
    color: #f7faff !important;
    font-size: clamp(40px, 4.6vw, 60px) !important;
    line-height: .98 !important;
    font-weight: 800 !important;
    letter-spacing: -2.5px !important;
}

#workflow .workflow-copy h2 span {
    display: block !important;
    margin-top: 6px !important;
    background: linear-gradient(90deg, #1ec5ff, #2998ff 50%, #815cff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

#workflow .workflow-copy > p {
    max-width: 590px !important;
    margin: 20px 0 0 !important;
    color: #afbed6 !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
}

#workflow .workflow-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 19px !important;
}

#workflow .workflow-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(100,155,220,.18) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.035) !important;
    color: #b9c8df !important;
    font-size: 9px !important;
    font-weight: 600 !important;
}

#workflow .workflow-meta i { color: #31c5ff !important; }

/* =========================================================
   CLEAN PIPELINE VISUAL
   4 nodes per row, fixed grid positions, no overlap
========================================================= */
#workflow .workflow-visual {
    position: relative !important;
    min-height: 320px !important;
    display: grid !important;
    place-items: center !important;
}

#workflow .workflow-visual-glow {
    position: absolute !important;
    width: 470px !important;
    height: 280px !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse, rgba(0,145,255,.16), rgba(93,65,240,.07) 50%, transparent 72%) !important;
    filter: blur(22px) !important;
}

#workflow .workflow-pipeline {
    position: relative !important;
    width: 500px !important;
    height: 300px !important;
    max-width: 100% !important;
}

#workflow .pipeline-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 5 !important;
    width: 215px !important;
    min-height: 82px !important;
    padding: 16px 18px !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid rgba(40,180,255,.48) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, rgba(18,62,112,.94), rgba(5,25,57,.98)) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.27), 0 0 25px rgba(0,140,255,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(14px) !important;
    text-align: center !important;
}

#workflow .pipeline-label {
    display: block !important;
    margin-bottom: 5px !important;
    color: #36c7ff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

#workflow .pipeline-card strong {
    display: block !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

#workflow .pipeline-card small {
    display: block !important;
    margin-top: 6px !important;
    color: #9fb3d0 !important;
    font-size: 7.5px !important;
    line-height: 1.4 !important;
}

#workflow .pipeline-node {
    position: absolute !important;
    z-index: 6 !important;
    width: 76px !important;
    height: 76px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    border: 1px solid rgba(39,177,255,.55) !important;
    border-radius: 50% !important;
    background: rgba(5,28,62,.97) !important;
    box-shadow: 0 10px 27px rgba(0,0,0,.22), 0 0 20px rgba(0,145,255,.09) !important;
    backdrop-filter: blur(9px) !important;
    text-align: center !important;
}

#workflow .pipeline-node span {
    display: block !important;
    color: #3bc8ff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

#workflow .pipeline-node b {
    display: block !important;
    color: #dce9fb !important;
    font-size: 7px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}

/* Eight fixed positions: intentionally separated */
#workflow .node-one   { left: 2px !important;   top: 8px !important; }
#workflow .node-two   { left: 143px !important; top: 8px !important; }
#workflow .node-three { right: 143px !important; top: 8px !important; }
#workflow .node-four  { right: 2px !important;   top: 8px !important; }
#workflow .node-five  { left: 2px !important;   bottom: 8px !important; }
#workflow .node-six   { left: 143px !important; bottom: 8px !important; }
#workflow .node-seven { right: 143px !important; bottom: 8px !important; }
#workflow .node-eight { right: 2px !important;   bottom: 8px !important; }

#workflow .node-four,
#workflow .node-seven { border-color: rgba(151,94,255,.70) !important; }
#workflow .node-four span,
#workflow .node-seven span { color: #ae89ff !important; }
#workflow .node-eight { border-color: rgba(47,220,190,.55) !important; }
#workflow .node-eight span { color: #57e2c5 !important; }

/* clean connectors behind the nodes */
#workflow .pipeline-route {
    position: absolute !important;
    z-index: 2 !important;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(34,180,255,.12), rgba(34,180,255,.55), rgba(130,80,255,.18)) !important;
    box-shadow: 0 0 9px rgba(0,150,255,.14) !important;
}

#workflow .route-top {
    left: 39px !important;
    right: 39px !important;
    top: 46px !important;
}

#workflow .route-bottom {
    left: 39px !important;
    right: 39px !important;
    bottom: 46px !important;
}

#workflow .route-mid {
    top: 50% !important;
    left: 72px !important;
    right: 72px !important;
    transform: rotate(90deg) !important;
    opacity: .2 !important;
}

/* =========================================================
   PROCESS HEADER
========================================================= */
#workflow .workflow-section-head {
    width: min(1180px, 92%) !important;
    margin: 0 auto 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 20px !important;
}

#workflow .workflow-section-label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #35c5ff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
}

#workflow .workflow-section-head h3 {
    margin: 0 !important;
    color: #f4f8ff !important;
    font-size: 25px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
    letter-spacing: -.6px !important;
}

#workflow .workflow-scroll-note {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(70,157,235,.23) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.025) !important;
    color: #8fa7c7 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

#workflow .workflow-scroll-note i { color: #32c5ff !important; }

/* =========================================================
   HORIZONTAL PROCESS CARDS
========================================================= */
#workflow .workflow-scroll {
    width: min(1180px, 92%) !important;
    margin: 0 auto !important;
    padding: 7px 3px 17px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: #1594ff rgba(255,255,255,.06) !important;
}

#workflow .workflow-scroll::-webkit-scrollbar { height: 6px !important; }
#workflow .workflow-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.045) !important; border-radius: 999px !important; }
#workflow .workflow-scroll::-webkit-scrollbar-thumb { background: linear-gradient(90deg,#0daaff,#7551ff) !important; border-radius: 999px !important; }

#workflow .workflow-track {
    display: flex !important;
    align-items: stretch !important;
    width: max-content !important;
    min-width: 100% !important;
    padding: 2px !important;
}

#workflow .workflow-card {
    position: relative !important;
    flex: 0 0 225px !important;
    width: 225px !important;
    min-height: 224px !important;
    padding: 18px 18px 23px !important;
    border: 1px solid rgba(31,165,255,.37) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(12,48,93,.90), rgba(5,23,53,.97)) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.045) !important;
    backdrop-filter: blur(12px) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

#workflow .workflow-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(40,190,255,.70) !important;
    box-shadow: 0 20px 40px rgba(0,105,255,.12), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#workflow .workflow-card.purple {
    border-color: rgba(136,85,255,.43) !important;
    background: linear-gradient(145deg, rgba(37,31,92,.90), rgba(10,21,56,.97)) !important;
}

#workflow .workflow-card.workflow-final {
    border-color: rgba(34,211,238,.55) !important;
    background: linear-gradient(145deg, rgba(11,70,91,.92), rgba(5,29,56,.98)) !important;
    box-shadow: 0 14px 36px rgba(0,190,220,.12), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

#workflow .workflow-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 13px !important;
}

#workflow .workflow-card-icon {
    width: 43px !important;
    height: 43px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(44,189,255,.38) !important;
    border-radius: 11px !important;
    background: rgba(10,126,194,.12) !important;
    color: #35c7ff !important;
    font-size: 16px !important;
}

#workflow .workflow-card.purple .workflow-card-icon {
    border-color: rgba(151,91,255,.43) !important;
    background: rgba(117,70,220,.13) !important;
    color: #aa82ff !important;
}

#workflow .workflow-card.workflow-final .workflow-card-icon {
    border-color: rgba(34,211,238,.45) !important;
    color: #58e4ef !important;
}

#workflow .workflow-number {
    display: grid !important;
    place-items: center !important;
    min-width: 38px !important;
    height: 22px !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#087de9,#198cff) !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .5px !important;
}

#workflow .workflow-card.purple .workflow-number {
    background: linear-gradient(90deg,#7138e8,#9656ff) !important;
}

#workflow .workflow-card.workflow-final .workflow-number {
    background: linear-gradient(90deg,#0da7bd,#22cfd0) !important;
}

#workflow .workflow-card h3 {
    min-height: 38px !important;
    margin: 0 0 9px !important;
    color: #f2f7ff !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 750 !important;
}

#workflow .workflow-card p {
    margin: 0 !important;
    color: #9fb3cf !important;
    font-size: 9.5px !important;
    line-height: 1.6 !important;
}

#workflow .workflow-line {
    position: absolute !important;
    left: 18px !important;
    bottom: 11px !important;
    width: 34px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #17bfff !important;
    box-shadow: 0 0 10px rgba(23,191,255,.35) !important;
}

#workflow .workflow-card.purple .workflow-line { background: #9258ff !important; box-shadow: 0 0 10px rgba(146,88,255,.35) !important; }
#workflow .workflow-card.workflow-final .workflow-line { background: #32d8d1 !important; box-shadow: 0 0 10px rgba(50,216,209,.35) !important; }

#workflow .workflow-arrow {
    flex: 0 0 34px !important;
    width: 30px !important;
    height: 30px !important;
    align-self: center !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 4px !important;
    border: 1px solid rgba(38,174,255,.55) !important;
    border-radius: 50% !important;
    background: rgba(5,28,62,.95) !important;
    color: #dff8ff !important;
    font-size: 15px !important;
    box-shadow: 0 0 18px rgba(0,157,255,.12) !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1080px) {
    #workflow .workflow-intro { grid-template-columns: 1fr !important; gap: 30px !important; }
    #workflow .workflow-copy { text-align: center !important; }
    #workflow .workflow-copy > p { margin-left: auto !important; margin-right: auto !important; }
    #workflow .workflow-meta { justify-content: center !important; }
}

@media (max-width: 600px) {
    #workflow { padding: 50px 0 65px !important; }
    #workflow .workflow-copy h2 { font-size: 40px !important; letter-spacing: -1.8px !important; }
    #workflow .workflow-visual { min-height: 260px !important; }
    #workflow .workflow-pipeline { width: 470px !important; transform: scale(.72) !important; transform-origin: center !important; margin: -38px 0 !important; }
    #workflow .workflow-card { flex-basis: 235px !important; width: 235px !important; }
    #workflow .workflow-section-head { align-items: flex-start !important; flex-direction: column !important; }
    #workflow .workflow-scroll-note { white-space: normal !important; }
}