.knowledge-saas { position: relative; overflow: hidden; background: #f8f9fd; }
.knowledge-saas::before { content: ''; position: absolute; top: 0; right: 0; width: 48%; height: 100%; background: #f0efff; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.knowledge-saas .container { position: relative; z-index: 1; }
.knowledge-saas__intro { display: grid !important; grid-template-columns: minmax(0, 1fr); row-gap: 26px !important; align-items: start; }
.knowledge-saas__eyebrow { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin: 0 !important; padding: 0 !important; color: var(--color-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.knowledge-saas__eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); }
.knowledge-saas__title { display: block; max-width: 520px; margin: 0 !important; padding: 0 !important; color: var(--color-heading); font-size: clamp(40px, 4.5vw, 66px); font-weight: 850; line-height: .99; letter-spacing: -.065em; }
.knowledge-saas__title span { color: var(--color-primary); }
.knowledge-saas__copy { display: block; max-width: 485px; margin: 0 !important; padding: 0 !important; color: var(--color-default); font-size: 17px; line-height: 1.7; }
.knowledge-saas__points { display: grid; gap: 16px; max-width: 500px; margin-top: 40px; }
@media (min-width: 992px) { .knowledge-saas .col-lg-5.mb-5.mb-lg-0.pl-lg-5 { padding-left: 3rem !important; } }
.knowledge-saas__point { position: relative; display: flex; align-items: center; gap: 14px; margin-left: 24px; padding: 16px 18px; border: 1px solid #e3e5ee; border-left: 1px solid #e3e5ee; border-radius: 0 10px 10px 0; background: #fff; box-shadow: 0 10px 24px rgba(20,25,60,.045); }
.knowledge-saas__point::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: -24px; width: 4px; border-radius: 4px; background: var(--color-primary); }
.knowledge-saas__point:nth-child(2)::before { background: #d53783; }
.knowledge-saas__point-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: var(--color-primary); background: #efedff; font-size: 15px; }
.knowledge-saas__point:nth-child(2) .knowledge-saas__point-icon { color: #d53783; background: #fff0f7; }
.knowledge-saas__point strong { display: block; color: var(--color-heading); font-size: 14px; }.knowledge-saas__point small { display: block; margin-top: 3px; color: var(--color-default); font-size: 12px; }
.knowledge-saas__visual { position: relative; max-width: 620px; margin: 0 auto; padding: 19px; }
.knowledge-saas__visual::before, .knowledge-saas__visual::after { content: ''; position: absolute; border: 1px solid #dfe1ed; background: #fff; pointer-events: none; }
.knowledge-saas__visual::before { inset: 9% 1% 7% 8%; transform: rotate(5deg); }.knowledge-saas__visual::after { inset: 5% 7% 10% 2%; transform: rotate(-4deg); }
.knowledge-saas__image-frame { position: relative; z-index: 1; padding: 10px; border: 1px solid #dfe1ed; background: #fff; box-shadow: 0 28px 65px rgba(42,46,100,.16); }
.knowledge-saas__image-frame img { display: block; width: 100%; height: auto; }
.knowledge-saas__image-label { position: absolute; z-index: 2; right: -16px; bottom: 30px; padding: 13px 16px; border: 1px solid #d9d6ff; background: #fff; box-shadow: 7px 8px 0 #dbd8ff; color: var(--color-heading); font-size: 11px; font-weight: 800; }
.knowledge-saas__image-label i { margin-right: 6px; color: #16a579; }
.knowledge-saas__image-note { position: absolute; z-index: 2; top: 35px; left: -15px; padding: 10px 13px; border: 1px solid #e4e5ed; background: #fff; box-shadow: 5px 6px 0 #eeeff5; color: var(--color-heading); font-size: 10px; font-weight: 800; }
.knowledge-saas__image-note span { display: block; margin-top: 3px; color: var(--color-default); font-size: 9px; font-weight: 500; }
@media (max-width: 991px) { .knowledge-saas::before { width: 100%; height: 43%; top: auto; bottom: 0; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); }.knowledge-saas__visual { margin-top: 55px; } }
@media (max-width: 575px) { .knowledge-saas__visual { padding: 10px 0 35px; }.knowledge-saas__image-label { right: -3px; bottom: 12px; }.knowledge-saas__image-note { top: 20px; left: -4px; }.knowledge-saas__visual::before { inset: 9% 1% 8% 5%; }.knowledge-saas__visual::after { inset: 5% 4% 11% 1%; } }
