div.banner{background:url("https://cdn.lofty.com/image/fs/servicetool/2026120/5/original_cb0def3bb48e47eb.png") center center/cover no-repeat;color:#202437;font-weight:500;position:relative;overflow:hidden}div.banner .banner-left{position:absolute;left:-20px;bottom:-20px}div.banner .banner-left img{width:200px;height:auto}div.banner .banner-right{position:absolute;right:-20px;bottom:-20px}div.banner .banner-right img{width:200px;height:auto}div.banner img{width:100%}div.banner h1.banner-title{font-weight:500}div.banner .module-wrap .hero_image{max-width:706px}@media (min-width: calc(800px + 1px)){div.banner{padding-top:160px;padding-bottom:100px}div.banner div.module-wrap{text-align:center;max-width:900px}div.banner p.banner-title{font-size:50px;line-height:58px;font-weight:500;margin-bottom:10px}div.banner div.banner-sub-title{margin:0 auto;max-width:1000px;font-size:16px;line-height:24px;color:#515666;margin-bottom:30px;font-weight:500}div.banner div.banner-text{font-size:20px;line-height:24px;color:#202437;font-weight:500}div.banner div.banner-text .banner-link{color:#3b5cde;text-decoration:underline;font-weight:500}div.banner div.banner-text .banner-link:hover{opacity:0.8}}@media (max-width: 800px){div.banner{padding-top:100px}div.banner h1.banner-title{font-size:36px;margin-bottom:10px}div.banner div.banner-sub-title{font-size:16px;line-height:28px;color:#515666;margin-bottom:20px}div.banner div.banner-text{font-size:14px;line-height:22px;color:#515666;margin-bottom:43px}div.banner div.banner-text .banner-link{color:#3b5cde;text-decoration:underline}div.banner div.banner-text .banner-link:hover{opacity:0.8}}.integration-services-page{background:#fff;min-height:100vh}@media (max-width: 800px){.integration-services-page{padding-top:0}}.integration-container{display:flex;gap:60px;max-width:1440px;margin:0 auto;padding:40px 80px;align-items:flex-start}@media (max-width: 800px){.integration-container{flex-direction:column;padding:20px;gap:30px}}.categories-sidebar{width:280px;flex-shrink:0;position:sticky;top:100px;align-self:flex-start;max-height:calc(100vh - 80px);overflow-y:auto}@media (max-width: 800px){.categories-sidebar{width:100%;position:static;max-height:none;overflow-y:visible}}.categories-sidebar .search-box{position:relative;margin-bottom:20px}.categories-sidebar .search-box .search-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);pointer-events:none}.categories-sidebar .search-box input{width:100%;background:#f6f7fb;padding:10px 15px 10px 40px;border:1px solid transparent;border-radius:32px;font-size:14px;color:#202437;outline:none;transition:all 0.3s}.categories-sidebar .search-box input::placeholder{color:#c6c8d1}.categories-sidebar .search-box input:focus{border-color:#3b5cde}.categories-sidebar .categories-section .categories-title{padding:10px 0 10px 20px;font-size:20px;line-height:30px;font-weight:700;color:#a0a3af;text-transform:uppercase}.categories-sidebar .categories-section .categories-list{list-style:none;padding:0;margin:0}.categories-sidebar .categories-section .categories-list li{position:relative;padding:12px 0}.categories-sidebar .categories-section .categories-list li .category-border{border-radius:24px;width:4px;height:calc(100% - 24px);background:transparent;position:absolute;left:0;top:12px}.categories-sidebar .categories-section .categories-list li:hover{background:#F6F7FB;border-radius:32px}.categories-sidebar .categories-section .categories-list li.active .category-border{background:#3b5cde}.categories-sidebar .categories-section .categories-list li.active a{color:#3b5cde}.categories-sidebar .categories-section .categories-list li a{display:block;font-size:18px;line-height:24px;font-weight:500;color:#202437;text-decoration:none;transition:all 0.2s;cursor:pointer;padding-left:20px}.integrations-content{flex:1;min-width:0}@media (max-width: 800px){.integrations-content{padding-right:0}}.integrations-content .page-title{font-size:32px;font-weight:600;color:#202437;margin-bottom:40px}@media (max-width: 800px){.integrations-content .page-title{font-size:24px;margin-bottom:30px}}.integrations-content .category-section{margin-bottom:40px}.integrations-content .category-section:last-child{margin-bottom:0}.integrations-content .category-section .category-title{font-size:24px;line-height:30px;font-weight:700;color:#202437;margin-bottom:20px}.integrations-content .category-section .category-title .search-highlight{color:#3B5CDE}@media (max-width: 800px){.integrations-content .category-section .category-title{font-size:20px;margin-bottom:20px}}.integrations-content .category-section .integrations-grid{display:flex;flex-wrap:wrap;gap:20px}@media (max-width: 800px){.integrations-content .category-section .integrations-grid{flex-direction:column;margin:0;gap:16px}}.integration-card{background:#ffffff;border:1px solid #ebecf1;border-radius:20px;padding:30px 24px;cursor:pointer;display:flex;flex-direction:column;width:calc((100% - 40px) / 3);margin:0;box-sizing:border-box;position:relative;overflow:visible}@media (max-width: 800px){.integration-card{width:100%;margin:0}}.integration-card:hover{border-color:#3b5cde;box-shadow:0px 4px 14px 0px rgba(59,92,222,0.1);z-index:10}.integration-card .card-icon{width:100%;height:60px;object-fit:contain;object-position:left center;margin-bottom:24px}.integration-card .card-title{font-size:16px;line-height:24px;font-weight:700;color:#202437;margin:0 0 10px 0;text-align:left}.integration-card .card-description{font-size:14px;line-height:24px;font-weight:400;color:#797E8B;margin:0;text-align:left;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;position:relative}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 0}.empty-state .empty-icon{width:40px;height:40px;margin-bottom:20px}.empty-state .empty-text{font-weight:400;font-size:14px;line-height:16px;letter-spacing:0px;color:#C6C8D1;margin:0}.loading-state{flex-direction:column;text-align:center;padding:80px 20px;color:#8b90a0}.loading-state .loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#3b5cde;border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 16px}.loading-state .loading-text{font-size:16px;margin:0}@keyframes spin{to{transform:rotate(360deg)}}.error-state{text-align:center;padding:80px 20px;color:#dc2626}.error-state .error-text{font-size:16px;margin:0}
