Initial commit

_static_server.js

@@ -0,0 +1,61 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const root = __dirname;
+const port = process.argv[2] ? parseInt(process.argv[2], 10) : 8181;
+
+const mime = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.webp': 'image/webp',
+  '.mp4': 'video/mp4',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.ico': 'image/x-icon',
+};
+
+const server = http.createServer((req, res) => {
+  let reqPath = decodeURIComponent(req.url.split('?')[0]);
+  if (reqPath === '/') reqPath = '/index.html';
+  let filePath = path.join(root, reqPath);
+
+  if (!filePath.startsWith(root)) {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+
+  fs.stat(filePath, (err, stats) => {
+    if (err) {
+      res.writeHead(404);
+      res.end('Not found: ' + reqPath);
+      return;
+    }
+    if (stats.isDirectory()) {
+      filePath = path.join(filePath, 'index.html');
+    }
+    fs.readFile(filePath, (err2, data) => {
+      if (err2) {
+        res.writeHead(404);
+        res.end('Not found: ' + reqPath);
+        return;
+      }
+      const ext = path.extname(filePath).toLowerCase();
+      res.writeHead(200, { 'Content-Type': mime[ext] || 'application/octet-stream' });
+      res.end(data);
+    });
+  });
+});
+
+server.listen(port, () => {
+  console.log(`Static server running at http://localhost:${port}/`);
+});

assets/car.svg

@@ -0,0 +1,39 @@
+<svg width="101" height="101" viewBox="0 0 101 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1063_2042)">
+<path d="M93.4169 76.6376L92.4874 56.8495L82.6054 38.1331L61.645 39.1177L63.4735 78.0441L93.4169 76.6376Z" fill="#C12B35"/>
+<path d="M74.8635 64.9708L68.8748 65.2521C68.4777 65.2708 68.0895 65.1309 67.7955 64.8634C67.5016 64.5958 67.3259 64.2224 67.3073 63.8253C67.2886 63.4282 67.4285 63.04 67.6961 62.746C67.9637 62.4521 68.3371 62.2765 68.7341 62.2578L74.7228 61.9765C75.1199 61.9578 75.5081 62.0977 75.8021 62.3653C76.096 62.6329 76.2717 63.0063 76.2903 63.4033C76.309 63.8004 76.1691 64.1886 75.9015 64.4826C75.634 64.7766 75.2606 64.9522 74.8635 64.9708Z" fill="#97262E"/>
+<path d="M88.6947 82.8611L96.6926 82.4854L96.4113 76.4967L88.4134 76.8724L19.072 80.1296L6.58105 80.7163L6.86236 86.705L19.3518 86.1183L88.6947 82.8611Z" fill="#CCCED5"/>
+<path d="M9.57558 80.5757L7.32515 32.6662C7.28784 31.8721 7.56754 31.0956 8.10271 30.5077C8.63788 29.9198 9.38469 29.5685 10.1788 29.5312L58.0883 27.2808C58.8825 27.2435 59.6589 27.5232 60.2468 28.0584C60.8348 28.5935 61.186 29.3403 61.2233 30.1345L63.4737 78.044L9.57558 80.5757Z" fill="#F4AC1C"/>
+<path d="M39.9803 71.6451C41.9679 71.5518 43.9176 71.0678 45.7181 70.221C47.5186 69.3741 49.1347 68.1809 50.4741 66.7095C51.8135 65.2381 52.85 63.5173 53.5243 61.6453C54.1986 59.7733 54.4977 57.7868 54.4043 55.7993L53.3481 33.3133C53.3125 32.5519 53.1273 31.8051 52.803 31.1153C52.4787 30.4256 52.0217 29.8065 51.458 29.2935C50.8944 28.7804 50.2352 28.3834 49.5181 28.1252C48.801 27.867 48.0401 27.7526 47.2787 27.7885L10.1788 29.5312C9.38469 29.5685 8.63788 29.9198 8.10271 30.5077C7.56754 31.0956 7.28784 31.8721 7.32515 32.6662L9.22395 73.0898L39.9803 71.6451Z" fill="#FFC239"/>
+<path d="M80.5054 89.2477C85.4666 89.0147 89.2995 84.8039 89.0664 79.8427C88.8334 74.8815 84.6227 71.0486 79.6615 71.2817C74.7003 71.5147 70.8674 75.7255 71.1004 80.6866C71.3334 85.6478 75.5442 89.4807 80.5054 89.2477Z" fill="#181A1C"/>
+<path d="M28.1043 91.7091C33.0655 91.4761 36.8985 87.2653 36.6654 82.3042C36.4324 77.343 32.2216 73.51 27.2604 73.7431C22.2992 73.9761 18.4663 78.1869 18.6994 83.1481C18.9324 88.1093 23.1432 91.9422 28.1043 91.7091Z" fill="#181A1C"/>
+<path d="M80.224 83.2592C81.8778 83.1815 83.1554 81.7779 83.0777 80.1242C83.0001 78.4704 81.5965 77.1928 79.9427 77.2705C78.289 77.3482 77.0114 78.7517 77.089 80.4055C77.1667 82.0592 78.5703 83.3368 80.224 83.2592Z" fill="#E0E2E6"/>
+<path d="M27.823 85.7206C29.4767 85.6429 30.7544 84.2393 30.6767 82.5856C30.599 80.9319 29.1954 79.6542 27.5417 79.7319C25.888 79.8096 24.6103 81.2132 24.688 82.8669C24.7657 84.5206 26.1693 85.7983 27.823 85.7206Z" fill="#E0E2E6"/>
+<path d="M92.5029 57.1744L68.5482 58.2997L67.6339 38.8364L82.6057 38.1332L92.4877 56.8495" fill="#76D8FF"/>
+<path d="M74.818 64.007L68.8293 64.2883C68.4322 64.3069 68.044 64.1671 67.7501 63.8995C67.4561 63.6319 67.2805 63.2585 67.2618 62.8614C67.2432 62.4644 67.383 62.0761 67.6506 61.7822C67.9182 61.4882 68.2916 61.3126 68.6887 61.2939L74.6774 61.0126C75.0744 60.994 75.4626 61.1338 75.7566 61.4014C76.0506 61.669 76.2262 62.0424 76.2448 62.4395C76.2635 62.8365 76.1237 63.2248 75.8561 63.5187C75.5885 63.8127 75.2151 63.9883 74.818 64.007Z" fill="#2B2E33"/>
+<path d="M24.1739 71.9269L10.9194 72.5495C10.5223 72.5682 10.1341 72.4283 9.84015 72.1607C9.54619 71.8931 9.37056 71.5197 9.35191 71.1227C9.33326 70.7256 9.47311 70.3374 9.7407 70.0434C10.0083 69.7494 10.3817 69.5738 10.7788 69.5552L24.0332 68.9326C24.4303 68.9139 24.8185 69.0538 25.1125 69.3213C25.4064 69.5889 25.5821 69.9623 25.6007 70.3594C25.6194 70.7565 25.4795 71.1447 25.2119 71.4387C24.9443 71.7326 24.5709 71.9083 24.1739 71.9269Z" fill="#F4AC1C"/>
+<path d="M29.881 65.6568L14.9093 66.3601C14.5122 66.3787 14.124 66.2389 13.8301 65.9713C13.5361 65.7037 13.3605 65.3303 13.3418 64.9332C13.3232 64.5361 13.463 64.1479 13.7306 63.8539C13.9982 63.56 14.3716 63.3844 14.7687 63.3657L29.7404 62.6624C30.1374 62.6438 30.5257 62.7836 30.8196 63.0512C31.1136 63.3188 31.2892 63.6922 31.3079 64.0893C31.3265 64.4864 31.1867 64.8746 30.9191 65.1686C30.6515 65.4625 30.2781 65.6381 29.881 65.6568Z" fill="#F4AC1C"/>
+<path d="M92.7135 61.6655L86.7248 61.9468C86.3278 61.9654 85.9544 62.141 85.6868 62.435C85.4192 62.729 85.2793 63.1172 85.298 63.5143L85.4386 66.5086C85.4573 66.9057 85.6329 67.2791 85.9269 67.5467C86.2208 67.8143 86.6091 67.9541 87.0061 67.9354L92.9948 67.6541L92.7135 61.6655Z" fill="#F4AC1C"/>
+<path d="M86.2128 82.9777C85.4186 83.015 84.6422 82.7353 84.0542 82.2002C83.4663 81.665 83.1151 80.9182 83.0778 80.124C83.0405 79.3299 82.6892 78.5831 82.1013 78.0479C81.5134 77.5127 80.7369 77.233 79.9428 77.2703C79.1486 77.3076 78.4018 77.6589 77.8666 78.2468C77.3315 78.8347 77.0518 79.6112 77.0891 80.4053C77.1264 81.1995 76.8467 81.9759 76.3115 82.5639C75.7763 83.1518 75.0295 83.503 74.2354 83.5403C73.4412 83.5776 72.6648 83.2979 72.0769 82.7628C71.4889 82.2276 71.1377 81.4808 71.1004 80.6866C70.9885 78.3042 71.8276 75.9749 73.4331 74.2111C75.0386 72.4473 77.279 71.3936 79.6615 71.2817C82.0439 71.1697 84.3732 72.0088 86.137 73.6144C87.9008 75.2199 88.9545 77.4603 89.0664 79.8427C89.1037 80.6369 88.8241 81.4133 88.2889 82.0012C87.7537 82.5892 87.0069 82.9404 86.2128 82.9777Z" fill="#2B2E33"/>
+<path d="M33.8117 85.4391C33.0176 85.4765 32.2411 85.1968 31.6532 84.6616C31.0653 84.1264 30.714 83.3796 30.6767 82.5855C30.6394 81.7913 30.2882 81.0445 29.7003 80.5093C29.1123 79.9742 28.3359 79.6945 27.5417 79.7318C26.7476 79.7691 26.0008 80.1203 25.4656 80.7082C24.9304 81.2962 24.6507 82.0726 24.688 82.8668C24.7253 83.6609 24.4456 84.4374 23.9105 85.0253C23.3753 85.6132 22.6285 85.9645 21.8344 86.0018C21.0402 86.0391 20.2638 85.7594 19.6758 85.2242C19.0879 84.689 18.7367 83.9422 18.6994 83.1481C18.5875 80.7656 19.4265 78.4363 21.0321 76.6725C22.6376 74.9087 24.878 73.855 27.2604 73.7431C29.6429 73.6312 31.9722 74.4703 33.736 76.0758C35.4998 77.6813 36.5535 79.9217 36.6654 82.3042C36.7027 83.0983 36.423 83.8747 35.8878 84.4627C35.3527 85.0506 34.6059 85.4018 33.8117 85.4391Z" fill="#2B2E33"/>
+<path d="M64.3616 78.0021L43.1811 78.997C41.5274 79.0747 40.2497 80.4783 40.3274 82.132C40.4051 83.7858 41.8087 85.0634 43.4624 84.9857L64.6429 83.9908C66.2966 83.9131 67.5743 82.5096 67.4966 80.8558C67.4189 79.2021 66.0153 77.9245 64.3616 78.0021Z" fill="#F3F3F5"/>
+<path d="M6.58105 80.7163L16.386 80.2557L16.4386 81.3741C16.4992 82.6648 16.045 83.9267 15.1759 84.8827C14.3067 85.8388 13.0936 86.4107 11.803 86.4729L6.86236 86.705L6.58105 80.7163Z" fill="#F3F3F5"/>
+<path d="M90.7897 76.7607L96.4116 76.4967L96.6929 82.4854L94.549 82.5861C93.6266 82.6294 92.7247 82.3045 92.0419 81.6829C91.359 81.0613 90.951 80.1939 90.9077 79.2715L90.7897 76.7607Z" fill="#F3F3F5"/>
+<path d="M87.1741 61.9258L92.7136 61.6656L92.9449 66.5883L89.9146 66.7306C89.5855 66.7471 89.2563 66.6984 88.9461 66.5874C88.6358 66.4764 88.3505 66.3053 88.1064 66.0838C87.8624 65.8624 87.6645 65.5949 87.524 65.2968C87.3835 64.9988 87.3033 64.6759 87.2878 64.3467L87.1741 61.9258Z" fill="#FFC239"/>
+<path d="M71.7648 42.0679L71.9735 46.5101C72.0286 47.6834 72.3143 48.8343 72.8143 49.8972C73.3142 50.9601 74.0187 51.9141 74.8874 52.7047C75.7561 53.4953 76.772 54.107 77.8771 54.505C78.9822 54.9029 80.1549 55.0793 81.3282 55.024L91.2769 54.5566L82.6055 38.1331L75.0223 38.4893C74.1158 38.5319 73.2633 38.9329 72.6524 39.604C72.0415 40.2751 71.7223 41.1614 71.7648 42.0679Z" fill="#CCF1FF"/>
+<path d="M9.36745 42.1238L8.99578 34.2113C8.96235 33.4997 9.21296 32.804 9.69247 32.2772C10.172 31.7504 10.8411 31.4357 11.5527 31.4023L19.4667 31.0306C20.1783 30.9971 20.874 31.2477 21.4008 31.7273C21.9275 32.2068 22.2423 32.8759 22.2757 33.5875C22.309 34.299 22.0583 34.9946 21.5788 35.5213L14.0364 43.8056C13.557 44.3324 12.8879 44.6472 12.1764 44.6807C11.4648 44.7141 10.7692 44.4635 10.2424 43.984C9.71559 43.5045 9.40087 42.8354 9.36745 42.1238Z" fill="#FFDA88"/>
+<path d="M24.1254 70.8892L6.15937 71.7331C5.76229 71.7517 5.37407 71.6119 5.08011 71.3443C4.78615 71.0767 4.61052 70.7033 4.59187 70.3063C4.57322 69.9092 4.71307 69.521 4.98065 69.227C5.24824 68.933 5.62164 68.7574 6.01872 68.7388L23.9848 67.8948C24.3818 67.8762 24.7701 68.016 25.064 68.2836C25.358 68.5512 25.5336 68.9246 25.5523 69.3217C25.5709 69.7188 25.4311 70.107 25.1635 70.4009C24.8959 70.6949 24.5225 70.8705 24.1254 70.8892Z" fill="#E63A45"/>
+<path d="M29.8325 64.6197L14.8608 65.3229C14.4637 65.3416 14.0755 65.2017 13.7816 64.9342C13.4876 64.6666 13.312 64.2932 13.2933 63.8961C13.2747 63.499 13.4145 63.1108 13.6821 62.8168C13.9497 62.5229 14.3231 62.3473 14.7202 62.3286L29.6919 61.6253C30.0889 61.6067 30.4772 61.7465 30.7711 62.0141C31.0651 62.2817 31.2407 62.6551 31.2594 63.0522C31.278 63.4493 31.1382 63.8375 30.8706 64.1314C30.603 64.4254 30.2296 64.601 29.8325 64.6197Z" fill="#E63A45"/>
+<path d="M49.0679 27.7047L20.0782 29.0664C20.3827 31.8851 21.5087 34.5522 23.3164 36.7363L33.2516 52.3697C33.5175 52.7889 33.8895 53.1302 34.3299 53.3591C34.7704 53.5881 35.2635 53.6964 35.7594 53.6731C36.2552 53.6498 36.736 53.4957 37.1531 53.2265C37.5701 52.9573 37.9085 52.5826 38.1339 52.1404C41.2628 46.0155 46.5626 35.6368 46.5641 35.6368C48.1569 33.2947 49.0275 30.5368 49.0679 27.7047Z" fill="#F4AC1C"/>
+<path d="M23.9718 32.4844L35.6375 50.8424L45.5311 31.4717C46.9385 29.3993 47.7409 26.9759 47.8486 24.4731C47.9563 21.9702 47.3648 19.4869 46.1406 17.3013C44.9164 15.1156 43.1077 13.3141 40.9173 12.0985C38.7268 10.8829 36.2411 10.3013 33.7387 10.4188C31.2364 10.5364 28.8161 11.3484 26.7493 12.764C24.6824 14.1796 23.0506 16.1427 22.0366 18.4335C21.0227 20.7242 20.6666 23.2521 21.0084 25.7338C21.3502 28.2155 22.3763 30.5531 23.9718 32.4844Z" fill="#C12B35"/>
+<path d="M45.5193 31.4723C47.0608 29.2022 47.8733 26.516 47.8485 23.7722C47.8236 21.0283 46.9625 18.3573 45.3802 16.1155C44.2885 14.6204 42.8431 13.4193 41.1734 12.6197C39.5037 11.8202 37.6617 11.4471 35.8125 11.534C33.9633 11.6209 32.1644 12.1649 30.577 13.1175C28.9896 14.07 27.6632 15.4013 26.7164 16.9922C25.3495 19.3718 24.7413 22.1119 24.9733 24.8463C25.2052 27.5807 26.2662 30.1792 28.0144 32.2946L34.058 41.8073C34.403 42.3506 34.8856 42.7929 35.4567 43.0896C36.0278 43.3862 36.6672 43.5265 37.3101 43.4963C37.953 43.4661 38.5764 43.2665 39.1172 42.9176C39.658 42.5688 40.097 42.0831 40.3895 41.5099L45.5193 31.4723Z" fill="#E63A45"/>
+<path d="M34.7128 31.3798C38.8471 31.1856 42.0412 27.6767 41.847 23.5424C41.6528 19.408 38.1439 16.2139 34.0095 16.4081C29.8752 16.6023 26.6811 20.1113 26.8753 24.2456C27.0695 28.3799 30.5785 31.574 34.7128 31.3798Z" fill="#F3F3F5"/>
+<path d="M34.0094 16.4082C33.5842 16.4347 33.162 16.4972 32.7473 16.595C34.4997 16.8078 36.1202 17.6342 37.3214 18.9277C38.5227 20.2212 39.2272 21.8983 39.31 23.6616C39.3928 25.4249 38.8487 27.1606 37.7739 28.561C36.6992 29.9614 35.1634 30.9361 33.4386 31.3122C34.4678 31.4408 35.5124 31.354 36.5062 31.0575C37.5001 30.761 38.4214 30.2612 39.2119 29.5898C40.0024 28.9184 40.6447 28.09 41.0981 27.1572C41.5516 26.2245 41.8062 25.2077 41.8459 24.1713C41.8856 23.1349 41.7095 22.1016 41.3287 21.1369C40.948 20.1722 40.3709 19.2971 39.6341 18.5672C38.8973 17.8373 38.0168 17.2685 37.0486 16.8968C36.0803 16.5252 35.0454 16.3588 34.0094 16.4082Z" fill="#E0E2E6"/>
+<path d="M38.2623 40.6556C37.8647 40.6738 37.4695 40.5861 37.1169 40.4016C36.7644 40.217 36.4671 39.9422 36.2555 39.6051C36.0439 39.2681 35.9256 38.8809 35.9126 38.4832C35.8996 38.0855 35.9923 37.6914 36.1815 37.3413L38.7369 32.6163C38.8684 32.3412 39.0544 32.0957 39.2837 31.8948C39.513 31.6938 39.7808 31.5416 40.0708 31.4474C40.3608 31.3532 40.6669 31.319 40.9705 31.3468C41.2741 31.3746 41.5689 31.4639 41.837 31.6092C42.105 31.7545 42.3407 31.9528 42.5297 32.1921C42.7187 32.4313 42.857 32.7066 42.9363 33.001C43.0156 33.2954 43.0342 33.6028 42.9909 33.9046C42.9476 34.2064 42.8435 34.4963 42.6847 34.7566L40.1292 39.4816C39.9451 39.8212 39.6766 40.1076 39.3496 40.3132C39.0226 40.5189 38.6481 40.6368 38.2623 40.6556Z" fill="#EB616A"/>
+</g>
+<defs>
+<clipPath id="clip0_1063_2042">
+<rect width="95.9246" height="95.9246" fill="white" transform="translate(0 4.50098) rotate(-2.68936)"/>
+</clipPath>
+</defs>
+</svg>

assets/connected-systems/connected-branch-new.svg

@@ -0,0 +1,239 @@
+<svg width="1201" height="453" viewBox="0 0 1201 453" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_323_255)">
+<path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.45"/>
+</g>
+<g filter="url(#filter1_f_323_255)">
+<path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.25"/>
+</g>
+<path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint0_linear_323_255)"/>
+<path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint1_linear_323_255)"/>
+<g filter="url(#filter2_f_323_255)">
+<path d="M1130.25 388.25C1132.31 388.25 1134.38 388.25 1136.44 388.25C1136.52 375.25 1136.61 362.25 1136.69 349.25C1136.69 348.824 1136.68 348.401 1136.66 347.978C1136.34 335.992 1125.44 325.508 1113.34 325.703C959.011 324.711 804.678 323.719 650.345 322.726C643.168 322.836 636.817 316.308 637.071 309.25C637.493 243.614 637.915 177.978 638.337 112.342C638.423 98.9778 638.509 85.6139 638.595 72.25C638.609 70.062 637.752 67.9635 636.205 66.4164C634.658 64.8692 632.547 64 630.345 64C628.142 64 626.031 64.8692 624.485 66.4164C622.937 67.9635 622.08 70.062 622.095 72.25C622.181 85.6139 622.267 98.9778 622.353 112.342C622.775 177.978 623.197 243.614 623.619 309.25C623.354 323.498 636.215 336.182 650.345 335.774C804.678 334.781 959.011 333.789 1113.34 332.797C1121.78 332.532 1129.63 339.811 1129.97 348.338C1129.99 348.641 1130 348.944 1130 349.25C1130.08 362.25 1130.17 375.25 1130.25 388.25Z" fill="#0066FF" fill-opacity="0.65"/>
+</g>
+<g filter="url(#filter3_f_323_255)">
+<path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint2_linear_323_255)"/>
+</g>
+<path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint3_linear_323_255)"/>
+<g filter="url(#filter4_f_323_255)">
+<path d="M337.438 388.25C335.376 388.25 333.313 388.25 331.251 388.25C331.179 380.583 331.107 372.917 331.035 365.25C331.021 363.519 331.198 361.779 331.568 360.079C333.673 349.693 343.629 341.555 354.345 341.645C424.678 340.985 495.011 340.325 565.345 339.665C573.025 339.753 579.762 332.757 579.465 325.25C578.761 250.239 578.057 175.228 577.353 100.217C577.267 91.0611 577.181 81.9056 577.095 72.75C577.074 70.562 577.925 68.4635 579.472 66.9164C581.019 65.3692 583.136 64.5 585.345 64.5C587.554 64.5 589.67 65.3692 591.217 66.9164C592.765 68.4635 593.616 70.562 593.595 72.75C593.509 81.9056 593.423 91.0611 593.337 100.217C592.633 175.228 591.929 250.239 591.225 325.25C591.446 339.049 578.971 351.266 565.345 350.835C495.011 350.175 424.678 349.515 354.345 348.855C346.912 348.632 339.747 354.203 338.106 361.558C337.819 362.762 337.668 364.002 337.654 365.25C337.582 372.917 337.51 380.583 337.438 388.25Z" fill="#0066FF" fill-opacity="0.65"/>
+</g>
+<path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint4_linear_323_255)"/>
+<path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint5_linear_323_255)"/>
+<g filter="url(#filter5_f_323_255)">
+<path d="M863.251 388.25C865.313 388.25 867.376 388.25 869.438 388.25C869.511 380.583 869.583 372.917 869.655 365.25C869.669 363.539 869.496 361.818 869.134 360.136C867.052 349.725 857.081 341.553 846.345 341.645C776.011 340.983 705.678 340.322 635.345 339.66C627.667 339.748 620.933 332.754 621.23 325.25C621.932 250.556 622.635 175.861 623.337 101.167C623.423 92.0278 623.509 82.8889 623.595 73.75C623.616 71.562 622.765 69.4635 621.217 67.9164C619.67 66.3692 617.554 65.5 615.345 65.5C613.136 65.5 611.019 66.3692 609.472 67.9164C607.925 69.4635 607.074 71.562 607.095 73.75C607.181 82.8889 607.267 92.0278 607.353 101.167C608.055 175.861 608.757 250.556 609.46 325.25C609.238 339.052 621.716 351.27 635.345 350.84C705.678 350.178 776.011 349.517 846.345 348.855C853.792 348.632 860.967 354.225 862.592 361.599C862.873 362.79 863.021 364.016 863.035 365.25C863.107 372.917 863.179 380.583 863.251 388.25Z" fill="#0066FF" fill-opacity="0.65"/>
+</g>
+<path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint6_linear_323_255)"/>
+<path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint7_linear_323_255)"/>
+<g filter="url(#filter6_f_323_255)">
+<path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="#0066FF" fill-opacity="0.65"/>
+</g>
+<path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint8_linear_323_255)"/>
+<path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint9_linear_323_255)"/>
+<g filter="url(#filter7_f_323_255)">
+<circle cx="67.3447" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter8_f_323_255)">
+<circle cx="67.3448" cy="390.25" r="10.1739" fill="url(#paint10_radial_323_255)" fill-opacity="0.3"/>
+</g>
+<circle cx="67.3443" cy="390.251" r="7.04348" fill="url(#paint11_linear_323_255)"/>
+<g filter="url(#filter9_f_323_255)">
+<circle cx="334.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter10_f_323_255)">
+<circle cx="334.345" cy="390.25" r="10.1739" fill="url(#paint12_radial_323_255)" fill-opacity="0.3"/>
+</g>
+<circle cx="334.344" cy="390.251" r="7.04348" fill="url(#paint13_linear_323_255)"/>
+<g filter="url(#filter11_f_323_255)">
+<circle cx="600.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter12_f_323_255)">
+<circle cx="600.345" cy="390.25" r="10.1739" fill="url(#paint14_radial_323_255)" fill-opacity="0.3"/>
+</g>
+<circle cx="600.344" cy="390.251" r="7.04348" fill="url(#paint15_linear_323_255)"/>
+<g filter="url(#filter13_f_323_255)">
+<circle cx="866.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter14_f_323_255)">
+<circle cx="866.345" cy="390.25" r="10.1739" fill="url(#paint16_radial_323_255)" fill-opacity="0.3"/>
+</g>
+<circle cx="866.344" cy="390.251" r="7.04348" fill="url(#paint17_linear_323_255)"/>
+<g filter="url(#filter15_f_323_255)">
+<circle cx="1133.34" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter16_f_323_255)">
+<circle cx="1133.34" cy="390.25" r="10.1739" fill="url(#paint18_radial_323_255)" fill-opacity="0.3"/>
+</g>
+<circle cx="1133.34" cy="390.251" r="7.04348" fill="url(#paint19_linear_323_255)"/>
+<defs>
+<filter id="filter0_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter1_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter2_f_323_255" x="558.095" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter3_f_323_255" x="621.095" y="63" width="520.757" height="333.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter4_f_323_255" x="267.034" y="0.5" width="390.561" height="451.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter5_f_323_255" x="543.095" y="1.5" width="390.561" height="450.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter6_f_323_255" x="535.095" y="9.25" width="130.5" height="443.467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter7_f_323_255" x="38.3882" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter8_f_323_255" x="51.6926" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter9_f_323_255" x="305.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter10_f_323_255" x="318.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter11_f_323_255" x="571.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter12_f_323_255" x="584.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter13_f_323_255" x="837.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter14_f_323_255" x="850.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter15_f_323_255" x="1104.39" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<filter id="filter16_f_323_255" x="1117.69" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/>
+</filter>
+<linearGradient id="paint0_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint2_linear_323_255" x1="881.845" y1="-7.74998" x2="881.845" y2="388.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0060EF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_323_255" x1="881.845" y1="-7.75005" x2="959.845" y2="337.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint4_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint6_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint7_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint8_linear_323_255" x1="600.345" y1="5.24999" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<linearGradient id="paint9_linear_323_255" x1="600.345" y1="-0.750011" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#0066FF"/>
+</linearGradient>
+<radialGradient id="paint10_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.1709 387.12) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint11_linear_323_255" x1="64.6051" y1="384.381" x2="67.3443" y2="397.294" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint12_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(333.171 387.12) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint13_linear_323_255" x1="331.605" y1="384.381" x2="334.344" y2="397.294" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint14_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(599.171 387.12) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint15_linear_323_255" x1="597.605" y1="384.381" x2="600.344" y2="397.294" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint16_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(865.171 387.12) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint17_linear_323_255" x1="863.605" y1="384.381" x2="866.344" y2="397.294" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint18_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1132.17 387.12) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint19_linear_323_255" x1="1130.61" y1="384.381" x2="1133.34" y2="397.294" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+</defs>
+</svg>

assets/connected-systems/connected-branch.svg

@@ -0,0 +1,172 @@
+<svg width="1124" height="166" viewBox="0 0 1124 166" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M561.462 8.92565C561.503 8.65257 561.757 8.46449 562.03 8.50556C562.303 8.54662 562.492 8.80128 562.451 9.07435L561.956 9L561.462 8.92565ZM554.516 58.4741L554.022 58.3997V58.3997L554.516 58.4741ZM26.2894 134.5C26.2894 133.027 27.4833 131.833 28.9561 131.833C30.4288 131.833 31.6227 133.027 31.6227 134.5C31.6227 135.973 30.4288 137.167 28.9561 137.167C27.4833 137.167 26.2894 135.973 26.2894 134.5ZM561.956 9L562.451 9.07435L555.011 58.5484L554.516 58.4741L554.022 58.3997L561.462 8.92565L561.956 9ZM534.739 75.5V76H48.9561V75.5V75H534.739V75.5ZM28.9561 95.5H29.4561V134.5H28.9561H28.4561V95.5H28.9561ZM48.9561 75.5V76C38.1865 76 29.4561 84.7304 29.4561 95.5H28.9561H28.4561C28.4561 84.1782 37.6342 75 48.9561 75V75.5ZM554.516 58.4741L555.011 58.5484C553.502 68.5802 544.883 76 534.739 76V75.5V75C544.388 75 552.587 67.9421 554.022 58.3997L554.516 58.4741Z" fill="#0060EF"/>
+<path d="M561.457 8.96975C561.474 8.69411 561.711 8.48421 561.986 8.50092C562.262 8.51762 562.472 8.75461 562.455 9.03025L561.956 9L561.457 8.96975ZM558.095 72.7099L557.596 72.6796V72.6796L558.095 72.7099ZM293.289 134.5C293.289 133.027 294.483 131.833 295.956 131.833C297.429 131.833 298.623 133.027 298.623 134.5C298.623 135.973 297.429 137.167 295.956 137.167C294.483 137.167 293.289 135.973 293.289 134.5ZM561.956 9L562.455 9.03025L558.594 72.7401L558.095 72.7099L557.596 72.6796L561.457 8.96975L561.956 9ZM538.131 91.5V92H315.956V91.5V91H538.131V91.5ZM295.956 111.5H296.456V134.5H295.956H295.456V111.5H295.956ZM315.956 91.5V92C305.186 92 296.456 100.73 296.456 111.5H295.956H295.456C295.456 100.178 304.634 91 315.956 91V91.5ZM558.095 72.7099L558.594 72.7401C557.938 83.5605 548.972 92 538.131 92V91.5V91C548.443 91 556.972 82.9722 557.596 72.6796L558.095 72.7099Z" fill="#0060EF"/>
+<path d="M562.451 8.92565C562.409 8.65257 562.155 8.46449 561.882 8.50556C561.609 8.54662 561.421 8.80128 561.462 9.07435L561.956 9L562.451 8.92565ZM569.396 58.4741L569.89 58.3997V58.3997L569.396 58.4741ZM1097.62 134.5C1097.62 133.027 1096.43 131.833 1094.96 131.833C1093.48 131.833 1092.29 133.027 1092.29 134.5C1092.29 135.973 1093.48 137.167 1094.96 137.167C1096.43 137.167 1097.62 135.973 1097.62 134.5ZM561.956 9L561.462 9.07435L568.901 58.5484L569.396 58.4741L569.89 58.3997L562.451 8.92565L561.956 9ZM589.173 75.5V76H1074.96V75.5V75H589.173V75.5ZM1094.96 95.5H1094.46V134.5H1094.96H1095.46V95.5H1094.96ZM1074.96 75.5V76C1085.73 76 1094.46 84.7304 1094.46 95.5H1094.96H1095.46C1095.46 84.1782 1086.28 75 1074.96 75V75.5ZM569.396 58.4741L568.901 58.5484C570.41 68.5802 579.029 76 589.173 76V75.5V75C579.524 75 571.325 67.9421 569.89 58.3997L569.396 58.4741Z" fill="#0060EF"/>
+<path d="M562.455 8.96975C562.438 8.69411 562.201 8.48421 561.926 8.50092C561.65 8.51762 561.44 8.75461 561.457 9.03025L561.956 9L562.455 8.96975ZM565.817 72.7099L566.316 72.6796V72.6796L565.817 72.7099ZM830.623 134.5C830.623 133.027 829.429 131.833 827.956 131.833C826.483 131.833 825.289 133.027 825.289 134.5C825.289 135.973 826.483 137.167 827.956 137.167C829.429 137.167 830.623 135.973 830.623 134.5ZM561.956 9L561.457 9.03025L565.318 72.7401L565.817 72.7099L566.316 72.6796L562.455 8.96975L561.956 9ZM585.781 91.5V92H807.956V91.5V91H585.781V91.5ZM827.956 111.5H827.456V134.5H827.956H828.456V111.5H827.956ZM807.956 91.5V92C818.726 92 827.456 100.73 827.456 111.5H827.956H828.456C828.456 100.178 819.278 91 807.956 91V91.5ZM565.817 72.7099L565.318 72.7401C565.974 83.5605 574.94 92 585.781 92V91.5V91C575.469 91 566.94 82.9722 566.316 72.6796L565.817 72.7099Z" fill="#0060EF"/>
+<g filter="url(#filter0_f_304_4057)">
+<path d="M560.967 8.8513C561.049 8.30515 561.559 7.92899 562.105 8.01112C562.651 8.09325 563.027 8.60256 562.945 9.1487L561.956 9L560.967 8.8513ZM554.516 58.4741L553.527 58.3254V58.3254L554.516 58.4741ZM23.6227 134.5C23.6227 131.554 26.0105 129.167 28.9561 129.167C31.9016 129.167 34.2894 131.554 34.2894 134.5C34.2894 137.446 31.9016 139.833 28.9561 139.833C26.0105 139.833 23.6227 137.446 23.6227 134.5ZM561.956 9L562.945 9.1487L555.505 58.6228L554.516 58.4741L553.527 58.3254L560.967 8.8513L561.956 9ZM534.739 75.5V76.5H48.9561V75.5V74.5H534.739V75.5ZM28.9561 95.5H29.9561V134.5H28.9561H27.9561V95.5H28.9561ZM48.9561 75.5V76.5C38.4626 76.5 29.9561 85.0066 29.9561 95.5H28.9561H27.9561C27.9561 83.902 37.3581 74.5 48.9561 74.5V75.5ZM554.516 58.4741L555.505 58.6228C553.96 68.8992 545.131 76.5 534.739 76.5V75.5V74.5C544.141 74.5 552.129 67.6231 553.527 58.3254L554.516 58.4741Z" fill="#0060EF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter1_f_304_4057)">
+<path d="M560.958 8.93951C560.991 8.38823 561.465 7.96842 562.017 8.00183C562.568 8.03524 562.988 8.50922 562.954 9.06049L561.956 9L560.958 8.93951ZM558.095 72.7099L557.097 72.6494V72.6494L558.095 72.7099ZM290.623 134.5C290.623 131.554 293.011 129.167 295.956 129.167C298.902 129.167 301.289 131.554 301.289 134.5C301.289 137.446 298.902 139.833 295.956 139.833C293.011 139.833 290.623 137.446 290.623 134.5ZM561.956 9L562.954 9.06049L559.093 72.7704L558.095 72.7099L557.097 72.6494L560.958 8.93951L561.956 9ZM538.131 91.5V92.5H315.956V91.5V90.5H538.131V91.5ZM295.956 111.5H296.956V134.5H295.956H294.956V111.5H295.956ZM315.956 91.5V92.5C305.463 92.5 296.956 101.007 296.956 111.5H295.956H294.956C294.956 99.902 304.358 90.5 315.956 90.5V91.5ZM558.095 72.7099L559.093 72.7704C558.421 83.8547 549.236 92.5 538.131 92.5V91.5V90.5C548.179 90.5 556.489 82.678 557.097 72.6494L558.095 72.7099Z" fill="#0060EF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter2_f_304_4057)">
+<path d="M562.945 8.8513C562.863 8.30515 562.354 7.92899 561.807 8.01112C561.261 8.09325 560.885 8.60256 560.967 9.1487L561.956 9L562.945 8.8513ZM569.396 58.4741L570.385 58.3254V58.3254L569.396 58.4741ZM1100.29 134.5C1100.29 131.554 1097.9 129.167 1094.96 129.167C1092.01 129.167 1089.62 131.554 1089.62 134.5C1089.62 137.446 1092.01 139.833 1094.96 139.833C1097.9 139.833 1100.29 137.446 1100.29 134.5ZM561.956 9L560.967 9.1487L568.407 58.6228L569.396 58.4741L570.385 58.3254L562.945 8.8513L561.956 9ZM589.173 75.5V76.5H1074.96V75.5V74.5H589.173V75.5ZM1094.96 95.5H1093.96V134.5H1094.96H1095.96V95.5H1094.96ZM1074.96 75.5V76.5C1085.45 76.5 1093.96 85.0066 1093.96 95.5H1094.96H1095.96C1095.96 83.902 1086.55 74.5 1074.96 74.5V75.5ZM569.396 58.4741L568.407 58.6228C569.952 68.8992 578.781 76.5 589.173 76.5V75.5V74.5C579.771 74.5 571.783 67.6231 570.385 58.3254L569.396 58.4741Z" fill="#0060EF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter3_f_304_4057)">
+<path d="M562.954 8.93951C562.921 8.38823 562.447 7.96842 561.896 8.00183C561.344 8.03524 560.924 8.50922 560.958 9.06049L561.956 9L562.954 8.93951ZM565.817 72.7099L566.815 72.6494V72.6494L565.817 72.7099ZM833.289 134.5C833.289 131.554 830.902 129.167 827.956 129.167C825.011 129.167 822.623 131.554 822.623 134.5C822.623 137.446 825.011 139.833 827.956 139.833C830.902 139.833 833.289 137.446 833.289 134.5ZM561.956 9L560.958 9.06049L564.819 72.7704L565.817 72.7099L566.815 72.6494L562.954 8.93951L561.956 9ZM585.781 91.5V92.5H807.956V91.5V90.5H585.781V91.5ZM827.956 111.5H826.956V134.5H827.956H828.956V111.5H827.956ZM807.956 91.5V92.5C818.449 92.5 826.956 101.007 826.956 111.5H827.956H828.956C828.956 99.902 819.554 90.5 807.956 90.5V91.5ZM565.817 72.7099L564.819 72.7704C565.491 83.8547 574.676 92.5 585.781 92.5V91.5V90.5C575.734 90.5 567.423 82.678 566.815 72.6494L565.817 72.7099Z" fill="#0060EF" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter4_f_304_4057)">
+<circle cx="28.9561" cy="136.5" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter5_f_304_4057)">
+<circle cx="28.9561" cy="136.5" r="10.1739" fill="url(#paint0_radial_304_4057)" fill-opacity="0.3"/>
+</g>
+<circle cx="28.9556" cy="136.5" r="7.04348" fill="url(#paint1_linear_304_4057)"/>
+<g filter="url(#filter6_f_304_4057)">
+<circle cx="295.956" cy="136.5" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter7_f_304_4057)">
+<circle cx="295.956" cy="136.5" r="10.1739" fill="url(#paint2_radial_304_4057)" fill-opacity="0.3"/>
+</g>
+<circle cx="295.956" cy="136.5" r="7.04348" fill="url(#paint3_linear_304_4057)"/>
+<g filter="url(#filter8_f_304_4057)">
+<circle cx="561.956" cy="136.5" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter9_f_304_4057)">
+<circle cx="561.956" cy="136.5" r="10.1739" fill="url(#paint4_radial_304_4057)" fill-opacity="0.3"/>
+</g>
+<circle cx="561.956" cy="136.5" r="7.04348" fill="url(#paint5_linear_304_4057)"/>
+<g filter="url(#filter10_f_304_4057)">
+<circle cx="827.956" cy="136.5" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter11_f_304_4057)">
+<circle cx="827.956" cy="136.5" r="10.1739" fill="url(#paint6_radial_304_4057)" fill-opacity="0.3"/>
+</g>
+<circle cx="827.956" cy="136.5" r="7.04348" fill="url(#paint7_linear_304_4057)"/>
+<g filter="url(#filter12_f_304_4057)">
+<circle cx="1094.96" cy="136.5" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g filter="url(#filter13_f_304_4057)">
+<circle cx="1094.96" cy="136.5" r="10.1739" fill="url(#paint8_radial_304_4057)" fill-opacity="0.3"/>
+</g>
+<circle cx="1094.96" cy="136.5" r="7.04348" fill="url(#paint9_linear_304_4057)"/>
+<path d="M561.456 81.5C561.456 81.2239 561.68 81 561.956 81C562.232 81 562.456 81.2239 562.456 81.5H561.956H561.456ZM559.289 134.5C559.289 133.027 560.483 131.833 561.956 131.833C563.429 131.833 564.623 133.027 564.623 134.5C564.623 135.973 563.429 137.167 561.956 137.167C560.483 137.167 559.289 135.973 559.289 134.5ZM561.956 81.5H562.456V134.5H561.956H561.456V81.5H561.956Z" fill="#0060EF"/>
+<path d="M561.956 7.5L561.956 81.5" stroke="#0060EF"/>
+<defs>
+<filter id="filter0_f_304_4057" x="15.623" y="0" width="555.333" height="147.833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter1_f_304_4057" x="282.623" y="0" width="288.333" height="147.833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter2_f_304_4057" x="552.956" y="0" width="555.333" height="147.833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter3_f_304_4057" x="552.956" y="0" width="288.333" height="147.833" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter4_f_304_4057" x="-0.0004673" y="107.543" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter5_f_304_4057" x="13.304" y="120.848" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter6_f_304_4057" x="267" y="107.543" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter7_f_304_4057" x="280.304" y="120.848" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter8_f_304_4057" x="533" y="107.543" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter9_f_304_4057" x="546.304" y="120.848" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter10_f_304_4057" x="799" y="107.543" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter11_f_304_4057" x="812.304" y="120.848" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter12_f_304_4057" x="1066" y="107.543" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<filter id="filter13_f_304_4057" x="1079.3" y="120.848" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_304_4057"/>
+</filter>
+<radialGradient id="paint0_radial_304_4057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.7822 133.37) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint1_linear_304_4057" x1="26.2165" y1="130.63" x2="28.9556" y2="143.543" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint2_radial_304_4057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(294.782 133.37) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint3_linear_304_4057" x1="293.216" y1="130.63" x2="295.956" y2="143.543" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint4_radial_304_4057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(560.782 133.37) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint5_linear_304_4057" x1="559.216" y1="130.63" x2="561.956" y2="143.543" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint6_radial_304_4057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(826.782 133.37) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint7_linear_304_4057" x1="825.216" y1="130.63" x2="827.956" y2="143.543" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+<radialGradient id="paint8_radial_304_4057" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1093.78 133.37) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint9_linear_304_4057" x1="1092.22" y1="130.63" x2="1094.96" y2="143.543" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+</defs>
+</svg>

assets/connected-systems/icon-donation.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="19.4989" height="21.4974" viewBox="0 0 19.4989 21.4974" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M17.4952 11.7475C18.1974 10.7381 18.6214 9.56146 18.7243 8.33609C18.8273 7.11072 18.6056 5.87985 18.0817 4.76738C17.5577 3.6549 16.75 2.70008 15.7397 1.99902C14.7294 1.29796 13.5523 0.875411 12.3268 0.773896C11.1013 0.672381 9.87069 0.895486 8.75884 1.42075C7.64698 1.94602 6.69311 2.75491 5.99324 3.76601C5.29337 4.77711 4.87221 5.95473 4.77214 7.18034C4.67207 8.40595 4.89662 9.6363 5.4232 10.7475" stroke="#0060EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M13.7502 5.12054C13.5942 4.29254 12.6362 3.51354 11.3432 3.81354C9.9882 4.12754 9.3742 5.72054 9.9882 6.71554C10.6252 7.74754 10.9302 8.74754 10.0992 10.1625C9.9382 10.4375 9.8572 10.5755 9.9012 10.6625C9.9462 10.7475 10.0892 10.7475 10.3742 10.7475H13.7502M8.7502 7.74754H12.7502M0.750197 12.7475H3.1452C3.4392 12.7475 3.7292 12.8135 3.9922 12.9415L6.0342 13.9295C6.2972 14.0565 6.5872 14.1225 6.8822 14.1225H7.9242C8.9322 14.1225 9.7502 14.9135 9.7502 15.8895C9.7502 15.9295 9.7232 15.9635 9.6842 15.9745L7.1432 16.6775C6.68725 16.8035 6.20106 16.7594 5.7752 16.5535L3.5922 15.4975M9.7502 15.2475L14.3432 13.8365C14.7431 13.7138 15.1714 13.7206 15.5672 13.8558C15.963 13.991 16.306 14.2478 16.5472 14.5895C16.9162 15.0995 16.7662 15.8315 16.2282 16.1415L8.7132 20.4785C8.47821 20.6145 8.21801 20.7012 7.94843 20.7333C7.67886 20.7655 7.40557 20.7424 7.1452 20.6655L0.750197 18.7675" stroke="#0060EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

assets/connected-systems/icon-dot.svg

@@ -0,0 +1,32 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="57.913" height="57.913" viewBox="0 0 57.913 57.913" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1171276413">
+<g id="Ellipse 1557" filter="url(#filter0_f_310_4340)">
+<circle cx="28.9565" cy="28.9565" r="18" fill="#0060EF" fill-opacity="0.1"/>
+</g>
+<g id="Ellipse 1558" filter="url(#filter1_f_310_4340)">
+<circle cx="28.9565" cy="28.9565" r="10.1739" fill="url(#paint0_radial_310_4340)" fill-opacity="0.3"/>
+</g>
+<circle id="Ellipse 1556" cx="28.9565" cy="28.9565" r="7.04348" fill="url(#paint1_linear_310_4340)"/>
+</g>
+<defs>
+<filter id="filter0_f_310_4340" x="0" y="0" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_310_4340"/>
+</filter>
+<filter id="filter1_f_310_4340" x="13.3043" y="13.3043" width="31.3043" height="31.3043" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_310_4340"/>
+</filter>
+<radialGradient id="paint0_radial_310_4340" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(27.7826 25.8261) rotate(90) scale(16.8261)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#00D994"/>
+</radialGradient>
+<linearGradient id="paint1_linear_310_4340" x1="26.2174" y1="23.087" x2="28.9565" y2="36" gradientUnits="userSpaceOnUse">
+<stop offset="0.0961538" stop-color="#BBD5FB"/>
+<stop offset="0.546266" stop-color="#0060EF"/>
+<stop offset="1" stop-color="#003789"/>
+</linearGradient>
+</defs>
+</svg>

assets/connected-systems/icon-marketplace.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="lsicon:marketplace-outline">
+<path id="Vector" d="M4.5 11.25H8.25M8.25 11.25V9M8.25 11.25H12M12 11.25V9M12 11.25H15.75M15.75 11.25V9M15.75 11.25H19.5M9.75 14.25H11.25M12.75 14.25H14.25M12.75 16.5H14.25M9.75 16.5H11.25M5.25 20.25V11.25H3.75V8.25L6 3.75H18L20.25 8.25V11.25H18.75V20.25H5.25Z" stroke="#0060EF" stroke-width="1.5" stroke-linejoin="round"/>
+</g>
+</svg>

assets/connected-systems/icon-recondition.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="carbon:condition-point">
+<path id="Vector" d="M6 12L12 6L18 12L12 18L6 12Z" fill="#0060EF"/>
+<path id="Vector_2" d="M22.0425 10.8953L13.1055 1.95675C12.8123 1.66409 12.415 1.49973 12.0007 1.49973C11.5865 1.49973 11.1892 1.66409 10.896 1.95675L1.95675 10.8953C1.66409 11.1884 1.49973 11.5858 1.49973 12C1.49973 12.4142 1.66409 12.8116 1.95675 13.1047L10.8953 22.0433C11.1884 22.3359 11.5858 22.5003 12 22.5003C12.4142 22.5003 12.8116 22.3359 13.1047 22.0433L22.0433 13.1047C22.3359 12.8116 22.5003 12.4142 22.5003 12C22.5003 11.5858 22.3359 11.1884 22.0433 10.8953M12 21.027L2.97375 12L12 2.973L21.027 12L12 21.027Z" fill="#0060EF"/>
+</g>
+</svg>

assets/connected-systems/icon-recycling.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="la:recycle">
+<path id="Vector" d="M12 2.97675C11.5895 2.97669 11.1856 3.07966 10.8253 3.27621C10.4649 3.47276 10.1597 3.75661 9.9375 4.10175L7.82775 7.5705L9.11775 8.34375L11.2268 4.89825C11.631 4.29525 12.3983 4.28025 12.7973 4.89825L15.141 8.64825L14.016 9.3045L17.4848 11.25V7.26525L16.4063 7.89825L14.0625 4.1025C13.8403 3.75736 13.5351 3.47351 13.1747 3.27696C12.8144 3.08041 12.4105 2.97669 12 2.97675ZM7.8045 9.0705L4.4295 11.016L5.367 11.5785L3.4455 14.742L3.4215 14.7188C3.41325 14.7338 3.4305 14.751 3.4215 14.766C2.3175 16.4385 3.5925 18.75 5.625 18.75H9.75V17.25H5.625C4.6755 17.25 4.16625 16.3125 4.66425 15.5858L4.6875 15.5625V15.5393L6.65625 12.3518L7.8045 13.0545V9.0705ZM18.7965 11.742L17.508 12.5393L19.383 15.5393C19.863 16.3568 19.3185 17.25 18.4455 17.25H14.25V15.75L10.5705 18L14.25 20.25V18.75H18.4455C20.4225 18.75 21.6915 16.5 20.6715 14.7653V14.7427L18.7965 11.742Z" fill="#0060EF"/>
+</g>
+</svg>

assets/connected-systems/icon-resale.svg

@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="19.9312" height="19.9302" viewBox="0 0 19.9312 19.9302" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M7.7466 1.8556C8.3106 1.3756 8.5926 1.1356 8.8866 0.994598C9.22333 0.833577 9.59185 0.75 9.9651 0.75C10.3384 0.75 10.7069 0.833577 11.0436 0.994598C11.3386 1.1346 11.6206 1.3746 12.1836 1.8556C12.4086 2.0476 12.5206 2.1426 12.6406 2.2226C12.9154 2.40677 13.224 2.53458 13.5486 2.5986C13.6896 2.6266 13.8366 2.6386 14.1306 2.6626C14.8696 2.7206 15.2386 2.7506 15.5466 2.8596C15.8984 2.98375 16.2179 3.18505 16.4818 3.44876C16.7457 3.71246 16.9472 4.03188 17.0716 4.3836C17.1806 4.6926 17.2096 5.0616 17.2686 5.7996C17.2916 6.0936 17.3036 6.2406 17.3316 6.3826C17.3956 6.7066 17.5236 7.0156 17.7076 7.2896C17.7876 7.4096 17.8836 7.5216 18.0746 7.7466C18.5546 8.3106 18.7956 8.5926 18.9366 8.8866C19.0976 9.22333 19.1812 9.59185 19.1812 9.9651C19.1812 10.3384 19.0976 10.7069 18.9366 11.0436C18.7966 11.3376 18.5556 11.6196 18.0746 12.1836C17.9434 12.3286 17.8209 12.4812 17.7076 12.6406C17.5235 12.9151 17.3957 13.2234 17.3316 13.5476C17.3036 13.6896 17.2916 13.8366 17.2686 14.1306C17.2096 14.8686 17.1806 15.2386 17.0716 15.5466C16.9472 15.8983 16.7457 16.2177 16.4818 16.4814C16.2179 16.7451 15.8984 16.9465 15.5466 17.0706C15.2386 17.1806 14.8696 17.2096 14.1306 17.2676C13.8366 17.2916 13.6906 17.3036 13.5486 17.3316C13.224 17.3956 12.9154 17.5234 12.6406 17.7076C12.4816 17.8209 12.3293 17.9435 12.1846 18.0746C11.6206 18.5546 11.3386 18.7946 11.0446 18.9356C10.7079 19.0966 10.3393 19.1802 9.9661 19.1802C9.59285 19.1802 9.22433 19.0966 8.8876 18.9356C8.5926 18.7956 8.3106 18.5556 7.7476 18.0746C7.60257 17.9434 7.44998 17.8209 7.2906 17.7076C7.01579 17.5234 6.70716 17.3956 6.3826 17.3316C6.19001 17.2989 5.99568 17.2775 5.8006 17.2676C5.0616 17.2096 4.6926 17.1796 4.3846 17.0706C4.0328 16.9465 3.71325 16.7451 3.44937 16.4814C3.18549 16.2177 2.98398 15.8983 2.8596 15.5466C2.7506 15.2386 2.7216 14.8686 2.6626 14.1306C2.65302 13.9352 2.63199 13.7405 2.5996 13.5476C2.53545 13.2234 2.40765 12.9151 2.2236 12.6406C2.1436 12.5206 2.0476 12.4086 1.8566 12.1836C1.3766 11.6196 1.1356 11.3376 0.994598 11.0436C0.833577 10.7069 0.75 10.3384 0.75 9.9651C0.75 9.59185 0.833577 9.22333 0.994598 8.8866C1.1356 8.5926 1.3756 8.3106 1.8566 7.7466C2.0476 7.5216 2.1436 7.4096 2.2236 7.2896C2.40765 7.01509 2.53545 6.70681 2.5996 6.3826C2.6276 6.2406 2.6396 6.0936 2.6626 5.7996C2.7216 5.0616 2.7506 4.6926 2.8596 4.3836C2.98408 4.03178 3.18575 3.7123 3.44981 3.44858C3.71387 3.18487 4.03362 2.98362 4.3856 2.8596C4.6936 2.7506 5.0626 2.7206 5.8016 2.6626C6.0956 2.6386 6.2416 2.6266 6.3836 2.5986C6.70816 2.53458 7.01679 2.40677 7.2916 2.2226C7.4116 2.1426 7.5226 2.0476 7.7466 1.8556Z" stroke="#0060EF" stroke-width="1.5"/>
+<path id="Vector_2" d="M6.9656 12.9656L12.9656 6.9656" stroke="#0060EF" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Vector_3" d="M13.4656 12.4656C13.4656 12.7308 13.3602 12.9852 13.1727 13.1727C12.9852 13.3602 12.7308 13.4656 12.4656 13.4656C12.2004 13.4656 11.946 13.3602 11.7585 13.1727C11.571 12.9852 11.4656 12.7308 11.4656 12.4656C11.4656 12.2004 11.571 11.946 11.7585 11.7585C11.946 11.571 12.2004 11.4656 12.4656 11.4656C12.7308 11.4656 12.9852 11.571 13.1727 11.7585C13.3602 11.946 13.4656 12.2004 13.4656 12.4656ZM8.4656 7.4656C8.4656 7.73081 8.36024 7.98517 8.1727 8.1727C7.98517 8.36024 7.73081 8.4656 7.4656 8.4656C7.20038 8.4656 6.94603 8.36024 6.75849 8.1727C6.57096 7.98517 6.4656 7.73081 6.4656 7.4656C6.4656 7.20038 6.57096 6.94603 6.75849 6.75849C6.94603 6.57096 7.20038 6.4656 7.4656 6.4656C7.73081 6.4656 7.98517 6.57096 8.1727 6.75849C8.36024 6.94603 8.4656 7.20038 8.4656 7.4656Z" fill="#0060EF"/>
+</g>
+</svg>

assets/connected-systems/label-icon-condition.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="carbon:condition-point">
+<path id="Vector" d="M6.5 13L13 6.5L19.5 13L13 19.5L6.5 13Z" fill="white"/>
+<path id="Vector_2" d="M23.8794 11.8032L14.1976 2.11981C13.88 1.80277 13.4496 1.6247 13.0008 1.6247C12.552 1.6247 12.1216 1.80277 11.804 2.11981L2.11981 11.8032C1.80277 12.1208 1.6247 12.5512 1.6247 13C1.6247 13.4488 1.80277 13.8792 2.11981 14.1968L11.8032 23.8802C12.1208 24.1972 12.5512 24.3753 13 24.3753C13.4488 24.3753 13.8792 24.1972 14.1968 23.8802L23.8802 14.1968C24.1972 13.8792 24.3753 13.4488 24.3753 13C24.3753 12.5512 24.1972 12.1208 23.8802 11.8032M13 22.7792L3.22156 13L13 3.22075L22.7792 13L13 22.7792Z" fill="white"/>
+</g>
+</svg>

assets/connected-systems/label-icon-market.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="gridicons:line-graph">
+<path id="Vector" d="M3.25 20.5833H22.75V22.75H3.25V20.5833ZM6.5 17.3333C7.69167 17.3333 8.66667 16.3583 8.66667 15.1667C8.66667 14.625 8.45 14.0833 8.125 13.7583L9.53333 10.8333H9.75C10.2917 10.8333 10.8333 10.6167 11.1583 10.2917L14.0833 11.8083V11.9167C14.0833 13.1083 15.0583 14.0833 16.25 14.0833C17.4417 14.0833 18.4167 13.1083 18.4167 11.9167C18.4167 11.375 18.2 10.9417 17.875 10.5083L19.2833 7.58333H19.5C20.6917 7.58333 21.6667 6.60833 21.6667 5.41667C21.6667 4.225 20.6917 3.25 19.5 3.25C18.3083 3.25 17.3333 4.225 17.3333 5.41667C17.3333 5.95833 17.55 6.5 17.875 6.825L16.4667 9.75H16.25C15.7083 9.75 15.1667 9.96667 14.8417 10.2917L11.9167 8.88333V8.66667C11.9167 7.475 10.9417 6.5 9.75 6.5C8.55833 6.5 7.58333 7.475 7.58333 8.66667C7.58333 9.20833 7.8 9.75 8.125 10.075L6.71667 13H6.5C5.30833 13 4.33333 13.975 4.33333 15.1667C4.33333 16.3583 5.30833 17.3333 6.5 17.3333Z" fill="white"/>
+</g>
+</svg>

assets/connected-systems/label-icon-resale.svg

@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.5921" height="21.591" viewBox="0 0 21.5921 21.591" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M8.39215 2.01023C9.00315 1.49023 9.30865 1.23023 9.62715 1.07748C9.99194 0.903042 10.3912 0.8125 10.7955 0.8125C11.1999 0.8125 11.5991 0.903042 11.9639 1.07748C12.2835 1.22915 12.589 1.48915 13.1989 2.01023C13.4426 2.21823 13.564 2.32115 13.694 2.40781C13.9917 2.60734 14.326 2.74579 14.6776 2.81515C14.8304 2.84548 14.9896 2.85848 15.3081 2.88448C16.1087 2.94731 16.5085 2.97981 16.8421 3.0979C17.2233 3.23239 17.5694 3.45047 17.8553 3.73615C18.1412 4.02184 18.3595 4.36787 18.4942 4.7489C18.6123 5.08365 18.6437 5.4834 18.7076 6.2829C18.7326 6.6014 18.7456 6.76065 18.7759 6.91448C18.8452 7.26548 18.9839 7.60023 19.1832 7.89706C19.2699 8.02706 19.3739 8.1484 19.5808 8.39215C20.1008 9.00315 20.3619 9.30865 20.5146 9.62715C20.6891 9.99194 20.7796 10.3912 20.7796 10.7955C20.7796 11.1999 20.6891 11.5991 20.5146 11.9639C20.363 12.2824 20.1019 12.5879 19.5808 13.1989C19.4387 13.356 19.306 13.5213 19.1832 13.694C18.9838 13.9914 18.8454 14.3253 18.7759 14.6766C18.7456 14.8304 18.7326 14.9896 18.7076 15.3081C18.6437 16.1076 18.6123 16.5085 18.4942 16.8421C18.3595 17.2232 18.1412 17.5692 17.8553 17.8549C17.5694 18.1406 17.2233 18.3587 16.8421 18.4931C16.5085 18.6123 16.1087 18.6437 15.3081 18.7066C14.9896 18.7326 14.8315 18.7456 14.6776 18.7759C14.326 18.8453 13.9917 18.9837 13.694 19.1832C13.5217 19.306 13.3567 19.4388 13.2 19.5808C12.589 20.1008 12.2835 20.3608 11.965 20.5136C11.6002 20.688 11.201 20.7785 10.7966 20.7785C10.3922 20.7785 9.99302 20.688 9.62823 20.5136C9.30865 20.3619 9.00315 20.1019 8.39323 19.5808C8.23612 19.4387 8.07081 19.306 7.89815 19.1832C7.60044 18.9837 7.26609 18.8453 6.91448 18.7759C6.70585 18.7405 6.49532 18.7173 6.28398 18.7066C5.4834 18.6437 5.08365 18.6112 4.74998 18.4931C4.36887 18.3587 4.02269 18.1406 3.73682 17.8549C3.45095 17.5692 3.23264 17.2232 3.0979 16.8421C2.97981 16.5085 2.9484 16.1076 2.88448 15.3081C2.87411 15.0965 2.85132 14.8856 2.81623 14.6766C2.74674 14.3253 2.60829 13.9914 2.4089 13.694C2.32223 13.564 2.21823 13.4426 2.01131 13.1989C1.49131 12.5879 1.23023 12.2824 1.07748 11.9639C0.903042 11.5991 0.8125 11.1999 0.8125 10.7955C0.8125 10.3912 0.903042 9.99194 1.07748 9.62715C1.23023 9.30865 1.49023 9.00315 2.01131 8.39215C2.21823 8.1484 2.32223 8.02706 2.4089 7.89706C2.60829 7.59968 2.74674 7.26571 2.81623 6.91448C2.84656 6.76065 2.85956 6.6014 2.88448 6.2829C2.9484 5.4834 2.97981 5.08365 3.0979 4.7489C3.23275 4.36776 3.45123 4.02165 3.73729 3.73596C4.02336 3.45028 4.36975 3.23225 4.75106 3.0979C5.08473 2.97981 5.48448 2.94731 6.28506 2.88448C6.60356 2.85848 6.76173 2.84548 6.91556 2.81515C7.26717 2.74579 7.60152 2.60734 7.89923 2.40781C8.02923 2.32115 8.14948 2.21823 8.39215 2.01023Z" stroke="white" stroke-width="1.625"/>
+<path id="Vector_2" d="M7.54694 14.0465L14.0469 7.54652" stroke="white" stroke-width="1.625" stroke-linecap="round"/>
+<path id="Vector_3" d="M14.5878 13.5048C14.5878 13.7922 14.4736 14.0677 14.2705 14.2709C14.0673 14.474 13.7917 14.5882 13.5044 14.5882C13.2171 14.5882 12.9416 14.474 12.7384 14.2709C12.5352 14.0677 12.4211 13.7922 12.4211 13.5048C12.4211 13.2175 12.5352 12.942 12.7384 12.7388C12.9416 12.5357 13.2171 12.4215 13.5044 12.4215C13.7917 12.4215 14.0673 12.5357 14.2705 12.7388C14.4736 12.942 14.5878 13.2175 14.5878 13.5048ZM9.17109 8.08818C9.17109 8.3755 9.05696 8.65105 8.85379 8.85422C8.65063 9.05738 8.37508 9.17152 8.08776 9.17152C7.80044 9.17152 7.52489 9.05738 7.32173 8.85422C7.11856 8.65105 7.00443 8.3755 7.00443 8.08818C7.00443 7.80087 7.11856 7.52532 7.32173 7.32215C7.52489 7.11899 7.80044 7.00485 8.08776 7.00485C8.37508 7.00485 8.65063 7.11899 8.85379 7.32215C9.05696 7.52532 9.17109 7.80087 9.17109 8.08818Z" fill="white"/>
+</g>
+</svg>

assets/connected-systems/label-icon-value.svg

@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="22.75" height="20.0408" viewBox="0 0 22.75 20.0408" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M4.65292 12.5049L2.73325 10.582L0.8125 12.5049M18.0971 7.54434L20.0167 9.46834L21.9375 7.54434" stroke="white" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M20.0168 9.46834C20.0168 7.17167 19.1068 4.97142 17.4861 3.3475C16.6841 2.54395 15.7316 1.90644 14.683 1.47145C13.6344 1.03646 12.5103 0.812542 11.375 0.812503C10.2722 0.811628 9.17971 1.02388 8.1575 1.43759C7.01638 1.89511 5.98597 2.59077 5.13504 3.47813C4.28411 4.36549 3.63224 5.42413 3.22292 6.58342M2.73325 10.5809C2.73491 12.59 3.43455 14.5361 4.7125 16.0864C5.98906 17.6349 7.76513 18.6903 9.73544 19.0712C11.7057 19.4522 13.7472 19.135 15.509 18.174C17.2707 17.2111 18.6434 15.6664 19.3928 13.8038" stroke="white" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M8.75333 12.1496C8.80972 12.7927 9.11567 13.3882 9.60567 13.8086C10.0957 14.2289 10.7308 14.4407 11.375 14.3986C13.4897 14.3986 13.9967 13.182 13.9967 12.1496C13.9967 11.1172 13.1224 10.023 11.375 10.023C9.62758 10.023 8.75333 9.33184 8.75333 7.9235C8.77759 7.43549 8.94992 6.96644 9.24737 6.5788C9.54483 6.19115 9.9533 5.90331 10.4184 5.75359C10.7272 5.65392 11.0522 5.61817 11.375 5.6485C12.02 5.62047 12.6513 5.84068 13.1389 6.26384C13.6266 6.68701 13.9335 7.28095 13.9967 7.9235M11.375 15.7094V14.5708M11.375 4.33334V5.64417" stroke="white" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

assets/road-path-1.svg

@@ -0,0 +1,3 @@
+<svg width="983" height="473" viewBox="0 0 983 473" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 384.5H111C144.137 384.5 171 357.637 171 324.5V291.25C171 256.042 199.542 227.5 234.75 227.5C269.958 227.5 298.5 256.042 298.5 291.25V386.75C298.5 421.406 326.594 449.5 361.25 449.5C395.906 449.5 424 421.406 424 386.75V163.25C424 128.594 452.094 100.5 486.75 100.5C521.406 100.5 549.5 128.594 549.5 163.25V258C549.5 293.07 577.93 321.5 613 321.5C648.07 321.5 676.5 293.07 676.5 258V86.25C676.5 51.5941 704.594 23.5 739.25 23.5C773.906 23.5 802 51.5941 802 86.25V118.5C802 151.637 828.863 178.5 862 178.5H982.5" stroke="#0060EF" stroke-opacity="0.2" stroke-width="47" stroke-linecap="round"/>
+</svg>

main/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Shoe scanner product showcase featuring Red Statement Loafer and Black Classic Loafer with AI-powered scanning interface.">
+    <title>Shoe Scanner – Product Showcase</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css?v=2">
+</head>
+<body>
+    <section class="showcase" id="showcase">
+
+        <!-- Background panels (full-width, decorative) -->
+        <div class="bg-panels" id="bg-panels">
+            <div class="bg-panel bg-panel--red" id="bg-red"></div>
+            <div class="bg-panel bg-panel--black" id="bg-black"></div>
+        </div>
+
+        <!-- Single 1320px content container -->
+        <div class="container" id="container">
+
+            <!-- Left content – Red Loafer -->
+            <div class="content-col content-col--left" id="content-left">
+                <h1 class="content-col__title" id="title-red">Red Statement Loafer</h1>
+                <dl class="spec-list" id="specs-red">
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">MSRP</dt>
+                        <dd class="spec-list__value">$119</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">SIZE</dt>
+                        <dd class="spec-list__value">USED</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">CONDITION</dt>
+                        <dd class="spec-list__value">13</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">COLOR</dt>
+                        <dd class="spec-list__value">Red</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">VALUE</dt>
+                        <dd class="spec-list__value">$34</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">DEMAND</dt>
+                        <dd class="spec-list__value">Seasonal/niche</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">CHANNEL</dt>
+                        <dd class="spec-list__value">Donation</dd>
+                    </div>
+                </dl>
+            </div>
+
+            <!-- Phone Mockups – Center -->
+            <div class="phones" id="phones">
+                <!-- Red Shoe Phone -->
+                <div class="phone phone--left" id="phone-red">
+                    <div class="phone__notch"></div>
+                    <div class="phone__header">
+                        <svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M19 12H5M12 19l-7-7 7-7"/>
+                        </svg>
+                        <svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
+                        </svg>
+                    </div>
+                    <div class="phone__viewfinder">
+                        <div class="phone__corners">
+                            <span class="corner corner--tl"></span>
+                            <span class="corner corner--tr"></span>
+                            <span class="corner corner--bl"></span>
+                            <span class="corner corner--br"></span>
+                        </div>
+                        <img src="../assets/red-loafer.png" alt="Red Statement Loafer" class="phone__shoe-img">
+                    </div>
+                    <p class="phone__caption">Top image of both shoes</p>
+                    <div class="phone__progress">
+                        <span class="phone__progress-text">Scanning process</span>
+                        <div class="phone__progress-bar">
+                            <div class="phone__progress-fill" style="width: 50%"></div>
+                        </div>
+                        <span class="phone__progress-count">1 of 2 Captured</span>
+                    </div>
+                    <button class="phone__btn phone__btn--capture" id="btn-capture-red">Capture Photo</button>
+                    <button class="phone__btn phone__btn--skip" id="btn-skip-red">Skip</button>
+                </div>
+
+                <!-- Black Shoe Phone -->
+                <div class="phone phone--right" id="phone-black">
+                    <div class="phone__notch"></div>
+                    <div class="phone__header">
+                        <svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M19 12H5M12 19l-7-7 7-7"/>
+                        </svg>
+                        <svg class="phone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="10"/>
+                            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>
+                        </svg>
+                    </div>
+                    <div class="phone__viewfinder">
+                        <div class="phone__corners">
+                            <span class="corner corner--tl"></span>
+                            <span class="corner corner--tr"></span>
+                            <span class="corner corner--bl"></span>
+                            <span class="corner corner--br"></span>
+                        </div>
+                        <img src="../assets/black-loafer.png" alt="Black Classic Loafer" class="phone__shoe-img">
+                    </div>
+                    <p class="phone__caption">Top image of both shoes</p>
+                    <div class="phone__progress">
+                        <span class="phone__progress-text">Scanning process</span>
+                        <div class="phone__progress-bar">
+                            <div class="phone__progress-fill" style="width: 50%"></div>
+                        </div>
+                        <span class="phone__progress-count">1 of 2 Captured</span>
+                    </div>
+                    <button class="phone__btn phone__btn--capture" id="btn-capture-black">Capture Photo</button>
+                    <button class="phone__btn phone__btn--skip" id="btn-skip-black">Skip</button>
+                </div>
+            </div>
+
+            <!-- Right content – Black Loafer -->
+            <div class="content-col content-col--right" id="content-right">
+                <h2 class="content-col__title" id="title-black">Black Classic Loafer</h2>
+                <dl class="spec-list" id="specs-black">
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">MSRP</dt>
+                        <dd class="spec-list__value">$119</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">SIZE</dt>
+                        <dd class="spec-list__value">USED</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">CONDITION</dt>
+                        <dd class="spec-list__value">10</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">COLOR</dt>
+                        <dd class="spec-list__value">Black</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">VALUE</dt>
+                        <dd class="spec-list__value">$91</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">DEMAND</dt>
+                        <dd class="spec-list__value">Year-round</dd>
+                    </div>
+                    <div class="spec-list__row">
+                        <dt class="spec-list__label">CHANNEL</dt>
+                        <dd class="spec-list__value">Premium Resale</dd>
+                    </div>
+                </dl>
+            </div>
+
+        </div>
+    </section>
+
+    <!-- GSAP Animation Library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+    <!-- Custom GSAP Animation Script -->
+    <script src="shoe-animation-gsap.js?v=3"></script>
+</body>
+</html>

main/shoe-animation-gsap.js

@@ -0,0 +1,83 @@
+/* ================================================
+   Shoe Showcase – Interactive GSAP Animation
+   ================================================
+   
+   - Uses GSAP for smooth easing and interpolation
+   ================================================ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const showcase = document.getElementById('showcase');
+    const bgRed = document.getElementById('bg-red');
+    const bgBlack = document.getElementById('bg-black');
+    const phoneRed = document.getElementById('phone-red');
+    const phoneBlack = document.getElementById('phone-black');
+    const contentLeft = document.getElementById('content-left');
+    const contentRight = document.getElementById('content-right');
+
+    function clamp(v, lo, hi) {
+        return Math.min(hi, Math.max(lo, v));
+    }
+    
+    function lerp(a, b, t) {
+        return a + (b - a) * t;
+    }
+
+    function animateToRatio(ratio) {
+        // ratio is 0 (far left) to 1 (far right). Center is 0.5.
+        
+        // 1. Calculate flex values for background panels
+        const redFlex = lerp(3.5, 0.3, ratio);
+        const blackFlex = lerp(0.3, 3.5, ratio);
+        
+        // 2. Calculate bias for phones (+1 when red dominates, -1 when black dominates)
+        const bias = (0.5 - ratio) * 2;  
+
+        const redScale     = 1 + clamp(bias, 0, 1) * 0.3;
+        const redOpacity   = clamp(1 + bias * 3, 0, 1);
+        const redShiftX    = clamp(bias, 0, 1) * 60;
+
+        const blackScale   = 1 + clamp(-bias, 0, 1) * 0.3;
+        const blackOpacity = clamp(1 - bias * 3, 0, 1);
+        const blackShiftX  = clamp(-bias, 0, 1) * -60;
+
+        // 3. Animate using GSAP
+        // Using overwrite: "auto" ensures that new mouse movements smoothly override old animations
+        const animConfig = { duration: 0.5, ease: "power2.out", overwrite: "auto" };
+
+        gsap.to(bgRed, { flexGrow: redFlex, ...animConfig });
+        gsap.to(bgBlack, { flexGrow: blackFlex, ...animConfig });
+
+        gsap.to(phoneRed, { 
+            scale: redScale, 
+            x: redShiftX, 
+            opacity: redOpacity, 
+            ...animConfig 
+        });
+
+        gsap.to(phoneBlack, { 
+            scale: blackScale, 
+            x: blackShiftX, 
+            opacity: blackOpacity, 
+            ...animConfig 
+        });
+
+        gsap.to(contentLeft, { opacity: redOpacity, ...animConfig });
+        gsap.to(contentRight, { opacity: blackOpacity, ...animConfig });
+    }
+
+    // Set initial center state
+    gsap.set(bgRed, { flexGrow: 1 });
+    gsap.set(bgBlack, { flexGrow: 1 });
+
+    /* ---- Mouse tracking ---- */
+    showcase.addEventListener('mousemove', (e) => {
+        const rect = showcase.getBoundingClientRect();
+        const ratio = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+        animateToRatio(ratio);
+    });
+
+    // Spring back to center on leave
+    showcase.addEventListener('mouseleave', () => {
+        animateToRatio(0.5);
+    });
+});

main/shoe-animation-vanilla.js

@@ -0,0 +1,74 @@
+/* ================================================
+   Shoe Showcase – Interactive Mouse-Driven Animation
+   ================================================
+   - Background panels expand/contract based on mouse X
+   - Phone mockups fade in/out (only phones, text stays)
+   - On mouse leave → smoothly resets to 50/50
+   ================================================ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const showcase = document.getElementById('showcase');
+    const bgRed = document.getElementById('bg-red');
+    const bgBlack = document.getElementById('bg-black');
+    const phoneRed = document.getElementById('phone-red');
+    const phoneBlack = document.getElementById('phone-black');
+
+    let targetRatio = 0.5;
+    let currentRatio = 0.5;
+    const LERP_SPEED = 0.1;
+
+    function lerp(a, b, t) {
+        return a + (b - a) * t;
+    }
+
+    function clamp(v, lo, hi) {
+        return Math.min(hi, Math.max(lo, v));
+    }
+
+    /* ---- mouse tracking ---- */
+    showcase.addEventListener('mousemove', (e) => {
+        const rect = showcase.getBoundingClientRect();
+        targetRatio = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+    });
+
+    showcase.addEventListener('mouseleave', () => {
+        targetRatio = 0.5;
+    });
+
+    /* ---- animation loop ---- */
+    function animate() {
+        currentRatio = lerp(currentRatio, targetRatio, LERP_SPEED);
+
+        const r = currentRatio;
+
+        /* 1. Background panel flex (full-width decorative) */
+        const redFlex  = lerp(3.5, 0.3, r);
+        const blackFlex = lerp(0.3, 3.5, r);
+
+        bgRed.style.flex   = redFlex;
+        bgBlack.style.flex = blackFlex;
+
+        /* 2. Phone mockup scale / opacity / translate */
+        const bias = (0.5 - r) * 2;  // +1 red, -1 black
+
+        const redScale     = 1 + clamp(bias, 0, 1) * 0.3;
+        const redOpacity   = clamp(1 + bias * 3, 0, 1);
+        const redShiftX    = clamp(bias, 0, 1) * 60;
+
+        const blackScale   = 1 + clamp(-bias, 0, 1) * 0.3;
+        const blackOpacity = clamp(1 - bias * 3, 0, 1);
+        const blackShiftX  = clamp(-bias, 0, 1) * -60;
+
+        phoneRed.style.transform   = `scale(${redScale}) translateX(${redShiftX}px)`;
+        phoneRed.style.opacity     = redOpacity;
+
+        phoneBlack.style.transform = `scale(${blackScale}) translateX(${blackShiftX}px)`;
+        phoneBlack.style.opacity   = blackOpacity;
+
+        /* 3. Text always stays visible — no opacity changes */
+
+        requestAnimationFrame(animate);
+    }
+
+    animate();
+});

main/styles.css

@@ -0,0 +1,426 @@
+/* ========================================
+   CSS Custom Properties & Reset
+   ======================================== */
+
+:root {
+    --color-red-bg: #6b0f1a;
+    --color-red-dark: #3d0a10;
+    --color-black-bg: #0e0e0e;
+    --color-white: #ffffff;
+    --color-white-dim: rgba(255, 255, 255, 0.35);
+    --color-capture-btn: #1a1f3d;
+    --color-progress-fill: #d4a017;
+
+    --font-display: 'Playfair Display', Georgia, serif;
+    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+    --phone-width: 190px;
+    --phone-height: 380px;
+    --phone-radius: 26px;
+}
+
+*,
+*::before,
+*::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 16px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    font-family: var(--font-body);
+    background: #000;
+    color: var(--color-white);
+    overflow-x: hidden;
+    margin: 0;
+}
+
+/* ========================================
+   Showcase Section – Full-width wrapper
+   ======================================== */
+
+.showcase {
+    position: relative;
+    width: 100%;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+/* ========================================
+   Background Panels – Decorative, full-width
+   ======================================== */
+
+.bg-panels {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    z-index: 0;
+}
+
+.bg-panel {
+    flex: 1;
+    will-change: flex;
+}
+
+.bg-panel--red {
+    background: linear-gradient(135deg, var(--color-red-bg) 0%, var(--color-red-dark) 100%);
+}
+
+.bg-panel--black {
+    background: linear-gradient(135deg, #1a1a1a 0%, var(--color-black-bg) 100%);
+}
+
+/* ========================================
+   Container – 1320px centered content
+   ======================================== */
+
+.container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 60px 40px;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 30px;
+}
+
+/* ========================================
+   Content Columns (Left / Right text)
+   ======================================== */
+
+.content-col {
+    width: 100%;
+}
+
+.content-col--left {
+    text-align: left;
+}
+
+.content-col--right {
+    text-align: left;
+    justify-self: end;
+}
+
+.content-col__title {
+    font-family: var(--font-display);
+    font-weight: 500;
+    font-style: italic;
+    font-size: 1.85rem;
+    line-height: 1.2;
+    margin-bottom: 36px;
+    letter-spacing: -0.02em;
+    color: var(--color-white);
+}
+
+/* ========================================
+   Spec List
+   ======================================== */
+
+.spec-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.spec-list__row {
+    display: flex;
+    align-items: baseline;
+    padding: 9px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.spec-list__row:last-child {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.spec-list__label {
+    font-size: 0.65rem;
+    font-weight: 500;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--color-white-dim);
+    width: 90px;
+    flex-shrink: 0;
+}
+
+.spec-list__value {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--color-white);
+    letter-spacing: -0.01em;
+}
+
+/* ========================================
+   Phone Mockups – Center column
+   ======================================== */
+
+.phones {
+    display: flex;
+    gap: 14px;
+    flex-shrink: 0;
+}
+
+.phone {
+    width: var(--phone-width);
+    height: var(--phone-height);
+    background: #ffffff;
+    border-radius: var(--phone-radius);
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-shadow:
+        0 25px 60px rgba(0, 0, 0, 0.4),
+        0 8px 20px rgba(0, 0, 0, 0.25),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    overflow: hidden;
+    will-change: transform, opacity;
+    transform-origin: center center;
+}
+
+/* Phone Notch */
+.phone__notch {
+    width: 80px;
+    height: 5px;
+    background: #1a1a1a;
+    border-radius: 10px;
+    margin: 0 auto 8px;
+}
+
+/* Phone Header */
+.phone__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 4px 6px;
+}
+
+.phone__icon {
+    width: 16px;
+    height: 16px;
+    color: #1a1a1a;
+    cursor: pointer;
+}
+
+/* Viewfinder */
+.phone__viewfinder {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1 / 0.85;
+    background: #f0f0f0;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.phone__corners {
+    position: absolute;
+    inset: 12px;
+    pointer-events: none;
+}
+
+.corner {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+}
+
+.corner::before,
+.corner::after {
+    content: '';
+    position: absolute;
+    background: #555;
+}
+
+.corner--tl { top: 0; left: 0; }
+.corner--tl::before { width: 20px; height: 2px; top: 0; left: 0; }
+.corner--tl::after { width: 2px; height: 20px; top: 0; left: 0; }
+
+.corner--tr { top: 0; right: 0; }
+.corner--tr::before { width: 20px; height: 2px; top: 0; right: 0; }
+.corner--tr::after { width: 2px; height: 20px; top: 0; right: 0; }
+
+.corner--bl { bottom: 0; left: 0; }
+.corner--bl::before { width: 20px; height: 2px; bottom: 0; left: 0; }
+.corner--bl::after { width: 2px; height: 20px; bottom: 0; left: 0; }
+
+.corner--br { bottom: 0; right: 0; }
+.corner--br::before { width: 20px; height: 2px; bottom: 0; right: 0; }
+.corner--br::after { width: 2px; height: 20px; bottom: 0; right: 0; }
+
+.phone__shoe-img {
+    width: 85%;
+    height: 85%;
+    object-fit: contain;
+    position: relative;
+    z-index: 1;
+}
+
+/* Caption */
+.phone__caption {
+    font-size: 0.65rem;
+    color: #444;
+    text-align: center;
+    margin-top: 6px;
+    font-weight: 400;
+}
+
+/* Progress */
+.phone__progress {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 4px;
+    padding: 0 2px;
+}
+
+.phone__progress-text {
+    font-size: 0.5rem;
+    color: #888;
+    white-space: nowrap;
+}
+
+.phone__progress-bar {
+    flex: 1;
+    height: 3px;
+    background: #e0e0e0;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.phone__progress-fill {
+    height: 100%;
+    background: var(--color-progress-fill);
+    border-radius: 3px;
+}
+
+.phone__progress-count {
+    font-size: 0.5rem;
+    color: #888;
+    white-space: nowrap;
+}
+
+/* Phone Buttons */
+.phone__btn {
+    display: block;
+    width: 100%;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-body);
+    font-weight: 500;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.phone__btn:active {
+    transform: scale(0.97);
+}
+
+.phone__btn--capture {
+    background: var(--color-capture-btn);
+    color: #fff;
+    font-size: 0.72rem;
+    padding: 10px 0;
+    border-radius: 20px;
+    margin-top: 10px;
+    letter-spacing: 0.02em;
+}
+
+.phone__btn--capture:hover {
+    background: #252b55;
+}
+
+.phone__btn--skip {
+    background: transparent;
+    color: #555;
+    font-size: 0.68rem;
+    padding: 6px 0;
+    margin-top: 2px;
+}
+
+.phone__btn--skip:hover {
+    color: #222;
+}
+
+/* ========================================
+   Responsive
+   ======================================== */
+
+@media (max-width: 1100px) {
+    :root {
+        --phone-width: 190px;
+        --phone-height: 380px;
+    }
+
+    .content-col__title {
+        font-size: 1.5rem;
+    }
+
+    .container {
+        padding: 0 30px;
+    }
+
+    .content-col {
+        width: 220px;
+    }
+}
+
+@media (max-width: 900px) {
+    .container {
+        flex-direction: column;
+        padding: 60px 30px;
+        gap: 40px;
+    }
+
+    .content-col {
+        width: 100%;
+        max-width: 400px;
+        text-align: center;
+    }
+
+    .spec-list__row {
+        justify-content: center;
+    }
+
+    .phones {
+        justify-content: center;
+    }
+
+    .channel-icons {
+        align-items: center;
+    }
+}
+
+@media (max-width: 520px) {
+    :root {
+        --phone-width: 160px;
+        --phone-height: 340px;
+    }
+
+    .phones {
+        gap: 10px;
+    }
+
+    .content-col__title {
+        font-size: 1.3rem;
+    }
+
+    .spec-list__label {
+        width: 80px;
+    }
+}

skiply/path-animation-fade.js

@@ -0,0 +1,221 @@
+/* =============================================
+   Skiply.ai — JavaScript
+   - Car travels along the exact road-path-1.svg path
+   - Back-and-forth loop using requestAnimationFrame
+   - Step icons pinned to real path coordinates
+   - Entry reveal animations via IntersectionObserver
+   ============================================= */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ═══════════════════════════════════════════
+     SCREEN 1 — Car motion along road path
+     ═══════════════════════════════════════════ */
+
+  /* ═══════════════════════════════════════════
+     Reusable Car Animation Setup
+     ═══════════════════════════════════════════ */
+  function setupRoadAnimation(svgId, pathId, carId, mainAreaSelector, screenId, speed = 0.00016) {
+    const svgEl    = document.getElementById(svgId);
+    const pathEl   = document.getElementById(pathId);
+    const car      = document.getElementById(carId);
+    const mainArea = document.querySelector(mainAreaSelector);
+    const screen   = document.getElementById(screenId);
+
+    if (!pathEl || !car || !svgEl || !mainArea || !screen) {
+      console.warn(`Missing elements for ${screenId}:`, {svgEl, pathEl, car, mainArea, screen});
+      return;
+    }
+
+    const TOTAL_LEN = pathEl.getTotalLength();
+
+    function getSVGScale() {
+      const rect = svgEl.getBoundingClientRect();
+      const vbW = svgEl.viewBox.baseVal.width || 1005;
+      const vbH = svgEl.viewBox.baseVal.height || 650;
+
+      const scaleX = rect.width  / vbW;
+      const scaleY = rect.height / vbH;
+      const scale  = Math.min(scaleX, scaleY);
+      
+      const offsetX = (rect.width  - vbW * scale) / 2;
+      const offsetY = (rect.height - vbH * scale) / 2;
+      return { scale, offsetX, offsetY, rect };
+    }
+
+    let progress  = 0;
+    const SPEED   = speed;
+    let lastTime  = null;
+    let rafId     = null;
+    let running   = false;
+    let looping   = false;
+
+    function getAngle(t, delta = 0.002) {
+      const t1 = Math.max(0, t - delta);
+      const t2 = Math.min(1, t + delta);
+      const p1 = pathEl.getPointAtLength(t1 * TOTAL_LEN);
+      const p2 = pathEl.getPointAtLength(t2 * TOTAL_LEN);
+      return Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
+    }
+
+    function placeCar(t) {
+      const { scale, offsetX, offsetY, rect } = getSVGScale();
+      const containerRect = mainArea.getBoundingClientRect();
+      const pt    = pathEl.getPointAtLength(t * TOTAL_LEN);
+      const angle = getAngle(t);
+      const relX  = (rect.left + offsetX + pt.x * scale) - containerRect.left;
+      const relY  = (rect.top  + offsetY + pt.y * scale) - containerRect.top;
+      car.style.left      = `${relX}px`;
+      car.style.top       = `${relY}px`;
+      car.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
+    }
+
+    function doLoop() {
+      looping = true;
+      car.style.transition = 'opacity 0.25s ease';
+      car.style.opacity    = '0';
+
+      setTimeout(() => {
+        progress = 0;
+        placeCar(0);
+        setTimeout(() => {
+          car.style.transition = 'opacity 0.3s ease';
+          car.style.opacity    = '1';
+          setTimeout(() => {
+            car.style.transition = '';
+            looping   = false;
+            lastTime  = null;
+            rafId = requestAnimationFrame(animateCar);
+          }, 320);
+        }, 60);
+      }, 280);
+    }
+
+    function animateCar(timestamp) {
+      if (looping) return;
+      if (!lastTime) lastTime = timestamp;
+      const dt  = Math.min(timestamp - lastTime, 50);
+      lastTime  = timestamp;
+
+      progress += SPEED * dt;
+
+      if (progress >= 1) {
+        progress = 1;
+        placeCar(1);
+        cancelAnimationFrame(rafId);
+        doLoop();
+        return;
+      }
+
+      placeCar(progress);
+      rafId = requestAnimationFrame(animateCar);
+    }
+
+    function startCar() {
+      if (running) return;
+      running  = true;
+      lastTime = null;
+      progress = 0;
+      looping  = false;
+      placeCar(0);
+      car.style.transition = 'opacity 0.4s ease';
+      car.style.opacity    = '1';
+      setTimeout(() => {
+        car.style.transition = '';
+        rafId = requestAnimationFrame(animateCar);
+      }, 420);
+    }
+
+    const ro = new ResizeObserver(() => {});
+    ro.observe(mainArea);
+
+    
+    
+    // Use GSAP ScrollTrigger for Fade In / Fade Out effect
+    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
+      gsap.registerPlugin(ScrollTrigger);
+      
+      // 1. Fade in the left side panel text
+      gsap.fromTo(document.querySelectorAll('#' + screenId + ' .side-panel > *'), 
+        { opacity: 0, y: 20 },
+        { 
+          opacity: 1, 
+          y: 0, 
+          duration: 0.6, 
+          stagger: 0.15, 
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 60%",
+            end: "bottom 40%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 2. Stagger fade-in for SVG pointers (navy circles and white icons)
+      const pointers = Array.from(document.querySelectorAll('#' + screenId + ' svg circle, #' + screenId + ' svg path')).filter(el => {
+        const fill = el.getAttribute('fill');
+        if (!fill) return false;
+        const upper = fill.toUpperCase();
+        return upper === '#0A1A37' || upper === 'WHITE' || upper === '#FFFFFF';
+      });
+      
+      gsap.fromTo(pointers, 
+        { opacity: 0, scale: 0, transformOrigin: "50% 50%" },
+        { 
+          opacity: 1, 
+          scale: 1,
+          duration: 0.4, 
+          stagger: 0.15, 
+          ease: "back.out(1.5)",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 50%",
+            end: "bottom 20%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 3. Start car animation when screen is in view
+      ScrollTrigger.create({
+        trigger: screen,
+        start: "top 60%",
+        onEnter: startCar,
+        once: true
+      });
+    }
+  }
+
+  // Initialize Screen 1
+  setupRoadAnimation('road-svg', 'road-path', 'road-car', '.main-area--prob1', 'screen-prob1', 0.00008);
+  
+  // Initialize Screen 2
+  setupRoadAnimation('road-svg-2', 'road-path-2', 'road-car-2', '.main-area--prob2', 'screen-prob2', 0.00016);
+
+  
+  
+
+
+  /* ═══════════════════════════════════════════
+     Screen 2 Fade In Effect (Original Smooth Version)
+     ═══════════════════════════════════════════ */
+  if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
+    gsap.fromTo('.screen--prob2', 
+      { opacity: 0 }, 
+      {
+        opacity: 1,
+        ease: "none",
+        scrollTrigger: {
+          trigger: '.screen--prob2',
+          start: "top 75%",
+          end: "top 0%",
+          scrub: true
+        }
+      }
+    );
+  }
+});

skiply/path-animation-fullpage.js

@@ -0,0 +1,215 @@
+/* =============================================
+   Skiply.ai — JavaScript
+   - Car travels along the exact road-path-1.svg path
+   - Back-and-forth loop using requestAnimationFrame
+   - Step icons pinned to real path coordinates
+   - Entry reveal animations via IntersectionObserver
+   ============================================= */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ═══════════════════════════════════════════
+     SCREEN 1 — Car motion along road path
+     ═══════════════════════════════════════════ */
+
+  /* ═══════════════════════════════════════════
+     Reusable Car Animation Setup
+     ═══════════════════════════════════════════ */
+  function setupRoadAnimation(svgId, pathId, carId, mainAreaSelector, screenId, speed = 0.00016) {
+    const svgEl    = document.getElementById(svgId);
+    const pathEl   = document.getElementById(pathId);
+    const car      = document.getElementById(carId);
+    const mainArea = document.querySelector(mainAreaSelector);
+    const screen   = document.getElementById(screenId);
+
+    if (!pathEl || !car || !svgEl || !mainArea || !screen) {
+      console.warn(`Missing elements for ${screenId}:`, {svgEl, pathEl, car, mainArea, screen});
+      return;
+    }
+
+    const TOTAL_LEN = pathEl.getTotalLength();
+
+    function getSVGScale() {
+      const rect = svgEl.getBoundingClientRect();
+      const vbW = svgEl.viewBox.baseVal.width || 1005;
+      const vbH = svgEl.viewBox.baseVal.height || 650;
+
+      const scaleX = rect.width  / vbW;
+      const scaleY = rect.height / vbH;
+      const scale  = Math.min(scaleX, scaleY);
+      
+      const offsetX = (rect.width  - vbW * scale) / 2;
+      const offsetY = (rect.height - vbH * scale) / 2;
+      return { scale, offsetX, offsetY, rect };
+    }
+
+    let progress  = 0;
+    const SPEED   = speed;
+    let lastTime  = null;
+    let rafId     = null;
+    let running   = false;
+    let looping   = false;
+
+    function getAngle(t, delta = 0.002) {
+      const t1 = Math.max(0, t - delta);
+      const t2 = Math.min(1, t + delta);
+      const p1 = pathEl.getPointAtLength(t1 * TOTAL_LEN);
+      const p2 = pathEl.getPointAtLength(t2 * TOTAL_LEN);
+      return Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
+    }
+
+    function placeCar(t) {
+      const { scale, offsetX, offsetY, rect } = getSVGScale();
+      const containerRect = mainArea.getBoundingClientRect();
+      const pt    = pathEl.getPointAtLength(t * TOTAL_LEN);
+      const angle = getAngle(t);
+      const relX  = (rect.left + offsetX + pt.x * scale) - containerRect.left;
+      const relY  = (rect.top  + offsetY + pt.y * scale) - containerRect.top;
+      car.style.left      = `${relX}px`;
+      car.style.top       = `${relY}px`;
+      car.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
+    }
+
+    function doLoop() {
+      looping = true;
+      car.style.transition = 'opacity 0.25s ease';
+      car.style.opacity    = '0';
+
+      setTimeout(() => {
+        progress = 0;
+        placeCar(0);
+        setTimeout(() => {
+          car.style.transition = 'opacity 0.3s ease';
+          car.style.opacity    = '1';
+          setTimeout(() => {
+            car.style.transition = '';
+            looping   = false;
+            lastTime  = null;
+            rafId = requestAnimationFrame(animateCar);
+          }, 320);
+        }, 60);
+      }, 280);
+    }
+
+    function animateCar(timestamp) {
+      if (looping) return;
+      if (!lastTime) lastTime = timestamp;
+      const dt  = Math.min(timestamp - lastTime, 50);
+      lastTime  = timestamp;
+
+      progress += SPEED * dt;
+
+      if (progress >= 1) {
+        progress = 1;
+        placeCar(1);
+        cancelAnimationFrame(rafId);
+        doLoop();
+        return;
+      }
+
+      placeCar(progress);
+      rafId = requestAnimationFrame(animateCar);
+    }
+
+    function startCar() {
+      if (running) return;
+      running  = true;
+      lastTime = null;
+      progress = 0;
+      looping  = false;
+      placeCar(0);
+      car.style.transition = 'opacity 0.4s ease';
+      car.style.opacity    = '1';
+      setTimeout(() => {
+        car.style.transition = '';
+        rafId = requestAnimationFrame(animateCar);
+      }, 420);
+    }
+
+    const ro = new ResizeObserver(() => {});
+    ro.observe(mainArea);
+
+    
+    
+    // Use GSAP ScrollTrigger for Fade In / Fade Out effect
+    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
+      gsap.registerPlugin(ScrollTrigger);
+      
+      // 1. Fade in the left side panel text
+      gsap.fromTo(document.querySelectorAll('#' + screenId + ' .side-panel > *'), 
+        { opacity: 0, y: 20 },
+        { 
+          opacity: 1, 
+          y: 0, 
+          duration: 0.6, 
+          stagger: 0.15, 
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 60%",
+            end: "bottom 40%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 2. Stagger fade-in for SVG pointers (navy circles and white icons)
+      const pointers = Array.from(document.querySelectorAll('#' + screenId + ' svg circle, #' + screenId + ' svg path')).filter(el => {
+        const fill = el.getAttribute('fill');
+        if (!fill) return false;
+        const upper = fill.toUpperCase();
+        return upper === '#0A1A37' || upper === 'WHITE' || upper === '#FFFFFF';
+      });
+      
+      gsap.fromTo(pointers, 
+        { opacity: 0, scale: 0, transformOrigin: "50% 50%" },
+        { 
+          opacity: 1, 
+          scale: 1,
+          duration: 0.4, 
+          stagger: 0.15, 
+          ease: "back.out(1.5)",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 50%",
+            end: "bottom 20%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 3. Start car animation when screen is in view
+      ScrollTrigger.create({
+        trigger: screen,
+        start: "top 60%",
+        onEnter: startCar,
+        once: true
+      });
+    }
+  }
+
+  // Initialize Screen 1
+  setupRoadAnimation('road-svg', 'road-path', 'road-car', '.main-area--prob1', 'screen-prob1', 0.00008);
+  
+  // Initialize Screen 2
+  setupRoadAnimation('road-svg-2', 'road-path-2', 'road-car-2', '.main-area--prob2', 'screen-prob2', 0.00016);
+
+  
+  
+
+
+  /* ═══════════════════════════════════════════
+     FullPage.js Initialization
+     ═══════════════════════════════════════════ */
+  if (typeof fullpage !== 'undefined') {
+    new fullpage('#fullpage', {
+      autoScrolling: true,
+      scrollBar: true, // IMPORTANT: keeps native scroll so GSAP ScrollTrigger still works!
+      scrollingSpeed: 700,
+      fitToSection: true,
+      fitToSectionDelay: 1000
+    });
+  }
+});

skiply/path-animation.js

@@ -0,0 +1,202 @@
+/* =============================================
+   Skiply.ai — JavaScript
+   - Car travels along the exact road-path-1.svg path
+   - Back-and-forth loop using requestAnimationFrame
+   - Step icons pinned to real path coordinates
+   - Entry reveal animations via IntersectionObserver
+   ============================================= */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  /* ═══════════════════════════════════════════
+     SCREEN 1 — Car motion along road path
+     ═══════════════════════════════════════════ */
+
+  /* ═══════════════════════════════════════════
+     Reusable Car Animation Setup
+     ═══════════════════════════════════════════ */
+  function setupRoadAnimation(svgId, pathId, carId, mainAreaSelector, screenId, speed = 0.00016) {
+    const svgEl    = document.getElementById(svgId);
+    const pathEl   = document.getElementById(pathId);
+    const car      = document.getElementById(carId);
+    const mainArea = document.querySelector(mainAreaSelector);
+    const screen   = document.getElementById(screenId);
+
+    if (!pathEl || !car || !svgEl || !mainArea || !screen) {
+      console.warn(`Missing elements for ${screenId}:`, {svgEl, pathEl, car, mainArea, screen});
+      return;
+    }
+
+    const TOTAL_LEN = pathEl.getTotalLength();
+
+    function getSVGScale() {
+      const rect = svgEl.getBoundingClientRect();
+      const vbW = svgEl.viewBox.baseVal.width || 1005;
+      const vbH = svgEl.viewBox.baseVal.height || 650;
+
+      const scaleX = rect.width  / vbW;
+      const scaleY = rect.height / vbH;
+      const scale  = Math.min(scaleX, scaleY);
+      
+      const offsetX = (rect.width  - vbW * scale) / 2;
+      const offsetY = (rect.height - vbH * scale) / 2;
+      return { scale, offsetX, offsetY, rect };
+    }
+
+    let progress  = 0;
+    const SPEED   = speed;
+    let lastTime  = null;
+    let rafId     = null;
+    let running   = false;
+    let looping   = false;
+
+    function getAngle(t, delta = 0.002) {
+      const t1 = Math.max(0, t - delta);
+      const t2 = Math.min(1, t + delta);
+      const p1 = pathEl.getPointAtLength(t1 * TOTAL_LEN);
+      const p2 = pathEl.getPointAtLength(t2 * TOTAL_LEN);
+      return Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI);
+    }
+
+    function placeCar(t) {
+      const { scale, offsetX, offsetY, rect } = getSVGScale();
+      const containerRect = mainArea.getBoundingClientRect();
+      const pt    = pathEl.getPointAtLength(t * TOTAL_LEN);
+      const angle = getAngle(t);
+      const relX  = (rect.left + offsetX + pt.x * scale) - containerRect.left;
+      const relY  = (rect.top  + offsetY + pt.y * scale) - containerRect.top;
+      car.style.left      = `${relX}px`;
+      car.style.top       = `${relY}px`;
+      car.style.transform = `translate(-50%, -50%) rotate(${angle}deg)`;
+    }
+
+    function doLoop() {
+      looping = true;
+      car.style.transition = 'opacity 0.25s ease';
+      car.style.opacity    = '0';
+
+      setTimeout(() => {
+        progress = 0;
+        placeCar(0);
+        setTimeout(() => {
+          car.style.transition = 'opacity 0.3s ease';
+          car.style.opacity    = '1';
+          setTimeout(() => {
+            car.style.transition = '';
+            looping   = false;
+            lastTime  = null;
+            rafId = requestAnimationFrame(animateCar);
+          }, 320);
+        }, 60);
+      }, 280);
+    }
+
+    function animateCar(timestamp) {
+      if (looping) return;
+      if (!lastTime) lastTime = timestamp;
+      const dt  = Math.min(timestamp - lastTime, 50);
+      lastTime  = timestamp;
+
+      progress += SPEED * dt;
+
+      if (progress >= 1) {
+        progress = 1;
+        placeCar(1);
+        cancelAnimationFrame(rafId);
+        doLoop();
+        return;
+      }
+
+      placeCar(progress);
+      rafId = requestAnimationFrame(animateCar);
+    }
+
+    function startCar() {
+      if (running) return;
+      running  = true;
+      lastTime = null;
+      progress = 0;
+      looping  = false;
+      placeCar(0);
+      car.style.transition = 'opacity 0.4s ease';
+      car.style.opacity    = '1';
+      setTimeout(() => {
+        car.style.transition = '';
+        rafId = requestAnimationFrame(animateCar);
+      }, 420);
+    }
+
+    const ro = new ResizeObserver(() => {});
+    ro.observe(mainArea);
+
+    
+    
+    // Use GSAP ScrollTrigger for Fade In / Fade Out effect
+    if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
+      gsap.registerPlugin(ScrollTrigger);
+      
+      // 1. Fade in the left side panel text
+      gsap.fromTo(document.querySelectorAll('#' + screenId + ' .side-panel > *'), 
+        { opacity: 0, y: 20 },
+        { 
+          opacity: 1, 
+          y: 0, 
+          duration: 0.6, 
+          stagger: 0.15, 
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 60%",
+            end: "bottom 40%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 2. Stagger fade-in for SVG pointers (navy circles and white icons)
+      const pointers = Array.from(document.querySelectorAll('#' + screenId + ' svg circle, #' + screenId + ' svg path')).filter(el => {
+        const fill = el.getAttribute('fill');
+        if (!fill) return false;
+        const upper = fill.toUpperCase();
+        return upper === '#0A1A37' || upper === 'WHITE' || upper === '#FFFFFF';
+      });
+      
+      gsap.fromTo(pointers, 
+        { opacity: 0, scale: 0, transformOrigin: "50% 50%" },
+        { 
+          opacity: 1, 
+          scale: 1,
+          duration: 0.4, 
+          stagger: 0.15, 
+          ease: "back.out(1.5)",
+          scrollTrigger: {
+            trigger: screen,
+            start: "top 50%",
+            end: "bottom 20%",
+            toggleActions: "play reverse play reverse"
+          }
+        }
+      );
+      
+      // 3. Start car animation when screen is in view
+      ScrollTrigger.create({
+        trigger: screen,
+        start: "top 60%",
+        onEnter: startCar,
+        once: true
+      });
+    }
+  }
+
+  // Initialize Screen 1
+  setupRoadAnimation('road-svg', 'road-path', 'road-car', '.main-area--prob1', 'screen-prob1', 0.00008);
+  
+  // Initialize Screen 2
+  setupRoadAnimation('road-svg-2', 'road-path-2', 'road-car-2', '.main-area--prob2', 'screen-prob2', 0.00016);
+
+  
+  
+
+});

skiply/skiply-connected-systems.css

@@ -0,0 +1,487 @@
+/* =============================================
+   Skiply.ai — Connected Systems section
+   Figma: SG-DEV 
+   ============================================= */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --navy-deep: #06152c;
+  --blue: #0060ef;
+  --text-white: #ffffff;
+  --text-dim: rgba(255, 255, 255, 0.65);
+  --line: rgba(255, 255, 255, 0.5);
+
+  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+
+  --content-w: 1320px;
+}
+
+html {
+  font-family: var(--font-main);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background: var(--navy-deep);
+}
+
+/* ── Section shell ──────────────────────────── */
+.connected {
+  background: var(--navy-deep);
+  padding: 96px 32px 80px;
+}
+
+.connected__inner {
+  max-width: var(--content-w);
+  margin: 0 auto;
+}
+
+/* ── Heading ────────────────────────────────── */
+.connected__header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.connected__eyebrow {
+  font-size: 0.95rem;
+  font-weight: 400;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+}
+
+.connected__title {
+  font-family: var(--font-display);
+  font-size: 2.6rem;
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--text-white);
+  max-width: 780px;
+  margin: 0 auto;
+}
+
+/* ── Banner / scan stage ─────────────────────── */
+.connected__banner {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.shoe-stage {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 631/527;
+}
+
+.shoe-stage__glow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 85%;
+  height: 85%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(ellipse, rgba(0, 96, 239, 0.35) 0%, rgba(0, 96, 239, 0) 70%);
+  filter: blur(20px);
+  animation: shoeGlowPulse 4s ease-in-out infinite;
+  pointer-events: none;
+}
+
+@keyframes shoeGlowPulse {
+
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+.shoe-stage__img {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: drop-shadow(0 0 14px rgba(110, 165, 255, 0.8)) drop-shadow(0 0 36px rgba(70, 120, 255, 0.4));
+}
+
+/* Outer layer: a plain rectangular clip that reveals left-to-right in
+   step with the scan beam via --reveal (kept separate from the alpha
+   mask below — combining both in one multi-layer mask is unreliable
+   across engines). */
+.shoe-stage__mesh-clip {
+  --reveal: 0%;
+  position: absolute;
+  inset: 0;
+  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
+  pointer-events: none;
+}
+
+/* Inner layer: the wireframe grid, clipped to the shoe's own alpha
+   silhouette so it only ever paints on the shoe itself. */
+.shoe-stage__mesh {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  background-image:
+    repeating-linear-gradient(0deg, rgba(140, 190, 255, 0.4) 0 1px, transparent 1px 22px),
+    repeating-linear-gradient(90deg, rgba(140, 190, 255, 0.4) 0 1px, transparent 1px 22px);
+  mix-blend-mode: screen;
+  filter: drop-shadow(0 0 5px rgba(96, 160, 255, 0.6));
+  -webkit-mask-image: url(../assets/connected-systems/shoe-clean.png);
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: url(../assets/connected-systems/shoe-clean.png);
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  mask-mode: alpha;
+  pointer-events: none;
+}
+
+/* Horizon beam: a persistent glowing line that appears to pass through
+   the shoe once the scan finishes, extending past its silhouette on
+   both sides. Grows outward from center. */
+
+.shoe-stage__horizon {
+  position: absolute;
+  left: -18%;
+  right: -18%;
+  top: 45%;
+  height: 3px;
+  margin-top: -1.5px;
+  opacity: 0;
+  transform: scaleX(0);
+  transform-origin: center;
+
+  pointer-events: none;
+
+  border-top: 2px solid;
+  border-image-slice: 2;
+  border-image-source: linear-gradient(90deg,
+      rgba(255, 255, 255, 0) 0%,
+      #fff 15.38%,
+      #fff 85.58%,
+      rgba(255, 255, 255, 0) 100%);
+
+  filter:
+    drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(110, 165, 255, 0.8)) drop-shadow(0 0 30px rgba(70, 120, 255, 0.5));
+}
+
+.shoe-stage__particles {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.scan-particle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: #cfe2ff;
+  box-shadow: 0 0 6px 1px rgba(150, 195, 255, 0.9);
+  opacity: 0;
+}
+
+/* ── Ambient dust: a persistent field of dots, independent of the
+   scroll-triggered scan sequence, that keeps the banner feeling alive.
+   Color is a light cyan-white chosen for contrast against the dark
+   navy banner backdrop. ── */
+.shoe-stage__ambient {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ambient-particle {
+  position: absolute;
+  border-radius: 50%;
+  background: #e4f0ff;
+  box-shadow: 0 0 5px 1.5px rgba(150, 195, 255, 0.85);
+  animation: ambientFloat var(--dur, 3.5s) ease-in-out infinite;
+  animation-delay: var(--delay, 0s);
+  animation-fill-mode: backwards;
+}
+
+@keyframes ambientFloat {
+
+  0%,
+  100% {
+    transform: translate(0, 0) scale(0.7);
+    opacity: 0.12;
+  }
+
+  50% {
+    transform: translate(var(--dx, 8px), var(--dy, -14px)) scale(1.2);
+    opacity: 0.85;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ambient-particle {
+    animation: none;
+    opacity: 0.4;
+  }
+}
+
+/* ── Scan labels: icon + two-line chip, matching Figma node 328:820 ── */
+.scan-label {
+  position: absolute;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
+  opacity: 0;
+  white-space: nowrap;
+  border-radius: 7px;
+  background: rgba(255, 255, 255, 0.10);
+  padding: 10px 20px;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+
+.scan-label__icon {
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+
+.scan-label__text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.3;
+}
+
+.scan-label__key {
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.scan-label__value {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-white);
+}
+
+.scan-label--condition {
+  left: -1%;
+  top: 0;
+}
+
+.scan-label--resale {
+  right: 2%;
+  top: 18%;
+}
+
+.scan-label--market {
+  left: 10%;
+  top: 66%;
+}
+
+.scan-label--value {
+  right: -4%;
+  top: 65%;
+}
+
+/* ── Light connector: carries the horizon beam into the tree ──── */
+.connected__flow {
+  position: relative;
+  width: 3px;
+  height: 56px;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+.connected__flow-line {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom,
+      transparent,
+      rgba(150, 195, 255, 0.95) 25%,
+      rgba(150, 195, 255, 0.95) 75%,
+      transparent);
+  box-shadow: 0 0 12px 3px rgba(110, 165, 255, 0.7);
+  transform: scaleY(0);
+  transform-origin: top center;
+  opacity: 0;
+}
+
+.connected__flow-dot {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 8px;
+  height: 8px;
+  margin: -4px 0 0 -4px;
+  border-radius: 50%;
+  background: #eaf2ff;
+  box-shadow: 0 0 10px 3px #6ba8ff, 0 0 20px 8px #3f7bff;
+  opacity: 0;
+}
+
+/* ── Distribution tree ──────────────────────── */
+.connected__tree {
+  position: relative;
+  margin-top: -250px;
+}
+
+.connected__branches {
+  display: block;
+  width: 100%;
+  height: auto;
+  opacity: 0;
+}
+
+/* Each branch reveals top-to-bottom independently, staggered in JS,
+   so the five lines visibly draw in one after another. */
+.connected__branch-group {
+  clip-path: inset(0 0 100% 0);
+}
+
+.connected__node {
+  opacity: 0;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+/* ── Route pills ─────────────────────────────── */
+.connected__routes {
+  display: flex;
+  gap: 15px;
+  list-style: none;
+}
+
+.route {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 24px;
+  min-height: 150px;
+  padding: 40px 20px;
+  background: var(--blue);
+  border-radius: 16px;
+  transition: transform 0.4s ease;
+}
+
+.route.is-lit {
+  transform: translateY(-4px);
+}
+
+.route__badge {
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  border-radius: 7px;
+  background: #ffffff;
+  border: 1px solid #e2dede;
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), inset 1px -1px 4px rgba(0, 0, 0, 0.15);
+  transform: rotate(45deg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.route__badge img {
+  width: 24px;
+  height: 24px;
+  transform: rotate(-45deg);
+}
+
+.route__label {
+  font-size: 1.1rem;
+  font-weight: 400;
+  color: var(--text-white);
+}
+
+/* ═══════════════════════════════════════════════
+   Responsive
+   ═══════════════════════════════════════════════ */
+@media (max-width: 1024px) {
+  .connected__title {
+    font-size: 2.1rem;
+  }
+
+  .connected__routes {
+    flex-wrap: wrap;
+  }
+
+  .route {
+    flex: 1 1 calc(33.333% - 10px);
+  }
+}
+
+@media (max-width: 640px) {
+  .connected {
+    padding: 64px 20px 56px;
+  }
+
+  .connected__title {
+    font-size: 1.6rem;
+  }
+
+  .connected__eyebrow {
+    font-size: 0.8rem;
+  }
+
+  .connected__branches {
+    display: none;
+  }
+
+  .scan-label {
+    font-size: 0.7rem;
+    gap: 8px;
+    padding: 6px 12px;
+  }
+
+  .scan-label__icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .scan-label__key {
+    font-size: 0.65rem;
+  }
+
+  .scan-label__value {
+    font-size: 0.8rem;
+  }
+
+  .connected__routes {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .route {
+    flex: 1 1 auto;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: auto;
+    gap: 16px;
+    padding: 14px 20px;
+  }
+
+  .route__label {
+    font-size: 1rem;
+  }
+}

skiply/skiply-connected-systems.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Skiply.ai – Connected systems. Designed to connect a product to its second life." />
+  <title>Skiply.ai – Connected Systems</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&display=swap"
+    rel="stylesheet" />
+
+  <link rel="stylesheet" href="skiply-connected-systems.css" />
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
+</head>
+
+<body>
+  <section class="connected" id="connected-systems">
+    <div class="connected__inner">
+
+      <!-- Heading -->
+      <header class="connected__header">
+        <p class="connected__eyebrow">Connected systems</p>
+        <h2 class="connected__title">Designed to connect a product to its second life</h2>
+      </header>
+
+      <!-- Shoe scan stage: plain product photo + CSS/JS-built wireframe scan effect -->
+      <div class="connected__banner">
+        <div class="shoe-stage" id="shoeStage">
+          <div class="shoe-stage__glow" aria-hidden="true"></div>
+
+          <img class="shoe-stage__img" src="../assets/connected-systems/Shoe_trans.png"
+            alt="Sneaker being scanned by Skiply's AI" />
+
+          <!-- <div class="shoe-stage__mesh-clip" id="meshClip" aria-hidden="true">
+            <div class="shoe-stage__mesh" id="shoeMesh"></div>
+          </div> -->
+          <div class="shoe-stage__horizon" id="scanHorizon" aria-hidden="true"></div>
+          <div class="shoe-stage__particles" id="scanParticles" aria-hidden="true"></div>
+          <div class="shoe-stage__ambient" id="ambientParticles" aria-hidden="true"></div>
+
+          <span class="scan-label scan-label--condition">
+            <img class="scan-label__icon" src="../assets/connected-systems/label-icon-condition.svg" alt="" />
+            <span class="scan-label__text">
+              <span class="scan-label__key">Condition</span>
+              <strong class="scan-label__value">New</strong>
+            </span>
+          </span>
+          <span class="scan-label scan-label--resale">
+            <img class="scan-label__icon" src="../assets/connected-systems/label-icon-resale.svg" alt="" />
+            <span class="scan-label__text">
+              <span class="scan-label__key">Resale</span>
+              <strong class="scan-label__value">In-Store</strong>
+            </span>
+          </span>
+          <span class="scan-label scan-label--market">
+            <img class="scan-label__icon" src="../assets/connected-systems/label-icon-market.svg" alt="" />
+            <span class="scan-label__text">
+              <span class="scan-label__key">Market</span>
+              <strong class="scan-label__value">High Demand</strong>
+            </span>
+          </span>
+          <span class="scan-label scan-label--value">
+            <img class="scan-label__icon" src="../assets/connected-systems/label-icon-value.svg" alt="" />
+            <span class="scan-label__text">
+              <span class="scan-label__key">Value</span>
+              <strong class="scan-label__value">$110</strong>
+            </span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Light connector: carries the horizon beam down into the tree -->
+      <!-- <div class="connected__flow" id="connectedFlow" aria-hidden="true">
+        <span class="connected__flow-line"></span>
+        <span class="connected__flow-dot"></span>
+      </div> -->
+
+      <!-- Distribution tree: logo fanning out to routing options -->
+      <div class="connected__tree">
+        <svg class="connected__branches" id="treeSvg" viewBox="0 0 1201 453" fill="none"
+          xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+
+          <g class="connected__branch-group" data-index="0">
+            <g filter="url(#filter0_f_323_255)"><path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.45"/></g>
+            <g filter="url(#filter1_f_323_255)"><path d="M70.4385 388.25C68.376 388.25 66.3135 388.25 64.251 388.25C64.1674 375.25 64.0838 362.25 64.0002 349.25C63.9979 348.824 64.0069 348.401 64.0273 347.978C64.3508 335.992 75.2542 325.508 87.3447 325.703C241.678 324.711 396.011 323.719 550.345 322.726C557.521 322.836 563.872 316.308 563.619 309.25C563.197 243.614 562.775 177.978 562.353 112.342C562.267 98.9778 562.181 85.6139 562.095 72.25C562.08 70.062 562.937 67.9635 564.485 66.4164C566.031 64.8692 568.142 64 570.345 64C572.547 64 574.658 64.8692 576.205 66.4164C577.752 67.9635 578.609 70.062 578.595 72.25C578.509 85.6139 578.423 98.9778 578.337 112.342C577.915 177.978 577.493 243.614 577.071 309.25C577.335 323.498 564.474 336.182 550.345 335.774C396.011 334.781 241.678 333.789 87.3447 332.797C78.9102 332.532 71.0623 339.811 70.7207 348.338C70.7021 348.641 70.6916 348.944 70.6893 349.25C70.6057 362.25 70.5221 375.25 70.4385 388.25Z" fill="#0066FF" fill-opacity="0.25"/></g>
+            <path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint0_linear_323_255)"/>
+            <path d="M67.8135 388.25C67.501 388.25 67.1885 388.25 66.876 388.25C66.8633 375.25 66.8506 362.25 66.838 349.25C66.8376 348.875 66.8473 348.503 66.8669 348.131C67.1981 337.612 76.8053 328.488 87.3447 328.713C241.678 328.562 396.011 328.412 550.345 328.262C560.471 328.498 569.584 319.358 569.326 309.25C569.262 243.614 569.198 177.978 569.134 112.342C569.121 98.9778 569.108 85.6139 569.095 72.25C569.094 71.9185 569.226 71.6005 569.46 71.3661C569.695 71.1317 570.013 71 570.345 71C570.677 71 570.995 71.1317 571.229 71.3661C571.464 71.6005 571.595 71.9185 571.595 72.25C571.582 85.6139 571.569 98.9778 571.556 112.342C571.492 177.978 571.428 243.614 571.364 309.25C571.624 320.448 561.525 330.52 550.345 330.238C396.011 330.088 241.678 329.938 87.3447 329.787C77.3592 329.552 68.215 338.191 67.8811 348.186C67.8617 348.539 67.8518 348.893 67.8515 349.25C67.8388 362.25 67.8261 375.25 67.8135 388.25Z" fill="url(#paint1_linear_323_255)"/>
+          </g>
+
+          <g class="connected__branch-group" data-index="1">
+            <g filter="url(#filter4_f_323_255)"><path d="M337.438 388.25C335.376 388.25 333.313 388.25 331.251 388.25C331.179 380.583 331.107 372.917 331.035 365.25C331.021 363.519 331.198 361.779 331.568 360.079C333.673 349.693 343.629 341.555 354.345 341.645C424.678 340.985 495.011 340.325 565.345 339.665C573.025 339.753 579.762 332.757 579.465 325.25C578.761 250.239 578.057 175.228 577.353 100.217C577.267 91.0611 577.181 81.9056 577.095 72.75C577.074 70.562 577.925 68.4635 579.472 66.9164C581.019 65.3692 583.136 64.5 585.345 64.5C587.554 64.5 589.67 65.3692 591.217 66.9164C592.765 68.4635 593.616 70.562 593.595 72.75C593.509 81.9056 593.423 91.0611 593.337 100.217C592.633 175.228 591.929 250.239 591.225 325.25C591.446 339.049 578.971 351.266 565.345 350.835C495.011 350.175 424.678 349.515 354.345 348.855C346.912 348.632 339.747 354.203 338.106 361.558C337.819 362.762 337.668 364.002 337.654 365.25C337.582 372.917 337.51 380.583 337.438 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
+            <path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint4_linear_323_255)"/>
+            <path d="M334.813 388.25C334.501 388.25 334.188 388.25 333.876 388.25C333.865 380.583 333.854 372.917 333.843 365.25C333.841 363.724 334.007 362.196 334.342 360.706C336.25 351.607 345.022 344.557 354.345 344.704C424.678 344.604 495.011 344.504 565.345 344.404C575.548 344.637 584.719 335.427 584.454 325.25C584.347 250.239 584.24 175.228 584.134 100.217C584.121 91.0611 584.108 81.9056 584.095 72.75C584.094 72.4185 584.226 72.1005 584.46 71.8661C584.694 71.6317 585.013 71.5 585.345 71.5C585.677 71.5 585.995 71.6317 586.229 71.8661C586.464 72.1005 586.595 72.4185 586.595 72.75C586.582 81.9056 586.569 91.0611 586.556 100.217C586.449 175.228 586.342 250.239 586.236 325.25C586.489 336.38 576.448 346.381 565.345 346.096C495.011 345.996 424.678 345.896 354.345 345.796C345.519 345.63 337.17 352.29 335.333 360.931C335.01 362.345 334.848 363.797 334.846 365.25C334.835 372.917 334.824 380.583 334.813 388.25Z" fill="url(#paint5_linear_323_255)"/>
+          </g>
+
+          <g class="connected__branch-group" data-index="2">
+            <g filter="url(#filter6_f_323_255)"><path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
+            <path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint8_linear_323_255)"/>
+            <path d="M599.095 73.25C599.928 73.25 600.761 73.25 601.595 73.25C601.582 78.5 601.569 83.75 601.556 89C601.321 183.5 601.087 278 600.853 372.5C600.84 377.75 600.826 383 600.813 388.25C600.813 388.374 600.764 388.493 600.676 388.581C600.588 388.668 600.469 388.718 600.345 388.718C600.221 388.718 600.102 388.668 600.014 388.581C599.926 388.493 599.876 388.374 599.876 388.25C599.863 383 599.85 377.75 599.837 372.5C599.603 278 599.368 183.5 599.134 89C599.121 83.75 599.108 78.5 599.095 73.25Z" fill="url(#paint9_linear_323_255)"/>
+          </g>
+
+          <g class="connected__branch-group" data-index="3">
+            <g filter="url(#filter5_f_323_255)"><path d="M863.251 388.25C865.313 388.25 867.376 388.25 869.438 388.25C869.511 380.583 869.583 372.917 869.655 365.25C869.669 363.539 869.496 361.818 869.134 360.136C867.052 349.725 857.081 341.553 846.345 341.645C776.011 340.983 705.678 340.322 635.345 339.66C627.667 339.748 620.933 332.754 621.23 325.25C621.932 250.556 622.635 175.861 623.337 101.167C623.423 92.0278 623.509 82.8889 623.595 73.75C623.616 71.562 622.765 69.4635 621.217 67.9164C619.67 66.3692 617.554 65.5 615.345 65.5C613.136 65.5 611.019 66.3692 609.472 67.9164C607.925 69.4635 607.074 71.562 607.095 73.75C607.181 82.8889 607.267 92.0278 607.353 101.167C608.055 175.861 608.757 250.556 609.46 325.25C609.238 339.052 621.716 351.27 635.345 350.84C705.678 350.178 776.011 349.517 846.345 348.855C853.792 348.632 860.967 354.225 862.592 361.599C862.873 362.79 863.021 364.016 863.035 365.25C863.107 372.917 863.179 380.583 863.251 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
+            <path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint6_linear_323_255)"/>
+            <path d="M865.876 388.25C866.188 388.25 866.501 388.25 866.813 388.25C866.824 380.583 866.835 372.917 866.846 365.25C866.849 363.741 866.686 362.231 866.359 360.757C864.471 351.634 855.686 344.556 846.345 344.704C776.011 344.604 705.678 344.503 635.345 344.403C625.142 344.636 615.972 335.426 616.236 325.25C616.343 250.556 616.449 175.861 616.556 101.167C616.569 92.0278 616.582 82.8889 616.595 73.75C616.595 73.4185 616.464 73.1005 616.23 72.8661C615.995 72.6317 615.677 72.5 615.345 72.5C615.013 72.5 614.694 72.6317 614.46 72.8661C614.226 73.1005 614.094 73.4185 614.095 73.75C614.108 82.8889 614.121 92.0278 614.134 101.167C614.24 175.861 614.347 250.556 614.453 325.25C614.2 336.38 624.241 346.382 635.345 346.097C705.678 345.997 776.011 345.896 846.345 345.796C855.187 345.629 863.549 352.316 865.367 360.978C865.683 362.378 865.841 363.813 865.843 365.25C865.854 372.917 865.865 380.583 865.876 388.25Z" fill="url(#paint7_linear_323_255)"/>
+          </g>
+
+          <g class="connected__branch-group" data-index="4">
+            <g filter="url(#filter2_f_323_255)"><path d="M1130.25 388.25C1132.31 388.25 1134.38 388.25 1136.44 388.25C1136.52 375.25 1136.61 362.25 1136.69 349.25C1136.69 348.824 1136.68 348.401 1136.66 347.978C1136.34 335.992 1125.44 325.508 1113.34 325.703C959.011 324.711 804.678 323.719 650.345 322.726C643.168 322.836 636.817 316.308 637.071 309.25C637.493 243.614 637.915 177.978 638.337 112.342C638.423 98.9778 638.509 85.6139 638.595 72.25C638.609 70.062 637.752 67.9635 636.205 66.4164C634.658 64.8692 632.547 64 630.345 64C628.142 64 626.031 64.8692 624.485 66.4164C622.937 67.9635 622.08 70.062 622.095 72.25C622.181 85.6139 622.267 98.9778 622.353 112.342C622.775 177.978 623.197 243.614 623.619 309.25C623.354 323.498 636.215 336.182 650.345 335.774C804.678 334.781 959.011 333.789 1113.34 332.797C1121.78 332.532 1129.63 339.811 1129.97 348.338C1129.99 348.641 1130 348.944 1130 349.25C1130.08 362.25 1130.17 375.25 1130.25 388.25Z" fill="#0066FF" fill-opacity="0.65"/></g>
+            <g filter="url(#filter3_f_323_255)"><path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint2_linear_323_255)"/></g>
+            <path d="M1132.88 388.25C1133.19 388.25 1133.5 388.25 1133.81 388.25C1133.83 375.25 1133.84 362.25 1133.85 349.25C1133.85 348.875 1133.84 348.503 1133.82 348.131C1133.49 337.612 1123.88 328.488 1113.34 328.713C959.011 328.562 804.678 328.412 650.345 328.262C640.218 328.498 631.106 319.358 631.364 309.25C631.428 243.614 631.492 177.978 631.556 112.342C631.569 98.9778 631.582 85.6139 631.595 72.25C631.595 71.9185 631.464 71.6005 631.229 71.3661C630.995 71.1317 630.677 71 630.345 71C630.013 71 629.695 71.1317 629.46 71.3661C629.226 71.6005 629.094 71.9185 629.095 72.25C629.108 85.6139 629.121 98.9778 629.134 112.342C629.198 177.978 629.262 243.614 629.326 309.25C629.066 320.448 639.165 330.52 650.345 330.238C804.678 330.088 959.011 329.938 1113.34 329.787C1123.33 329.552 1132.47 338.191 1132.81 348.186C1132.83 348.539 1132.84 348.893 1132.84 349.25C1132.85 362.25 1132.86 375.25 1132.88 388.25Z" fill="url(#paint3_linear_323_255)"/>
+          </g>
+
+          <g class="connected__node" data-index="0">
+            <g filter="url(#filter7_f_323_255)"><circle cx="67.3447" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
+            <g filter="url(#filter8_f_323_255)"><circle cx="67.3448" cy="390.25" r="10.1739" fill="url(#paint10_radial_323_255)" fill-opacity="0.3"/></g>
+            <circle cx="67.3443" cy="390.251" r="7.04348" fill="url(#paint11_linear_323_255)"/>
+          </g>
+          <g class="connected__node" data-index="1">
+            <g filter="url(#filter9_f_323_255)"><circle cx="334.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
+            <g filter="url(#filter10_f_323_255)"><circle cx="334.345" cy="390.25" r="10.1739" fill="url(#paint12_radial_323_255)" fill-opacity="0.3"/></g>
+            <circle cx="334.344" cy="390.251" r="7.04348" fill="url(#paint13_linear_323_255)"/>
+          </g>
+          <g class="connected__node" data-index="2">
+            <g filter="url(#filter11_f_323_255)"><circle cx="600.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
+            <g filter="url(#filter12_f_323_255)"><circle cx="600.345" cy="390.25" r="10.1739" fill="url(#paint14_radial_323_255)" fill-opacity="0.3"/></g>
+            <circle cx="600.344" cy="390.251" r="7.04348" fill="url(#paint15_linear_323_255)"/>
+          </g>
+          <g class="connected__node" data-index="3">
+            <g filter="url(#filter13_f_323_255)"><circle cx="866.345" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
+            <g filter="url(#filter14_f_323_255)"><circle cx="866.345" cy="390.25" r="10.1739" fill="url(#paint16_radial_323_255)" fill-opacity="0.3"/></g>
+            <circle cx="866.344" cy="390.251" r="7.04348" fill="url(#paint17_linear_323_255)"/>
+          </g>
+          <g class="connected__node" data-index="4">
+            <g filter="url(#filter15_f_323_255)"><circle cx="1133.34" cy="390.25" r="18" fill="#0060EF" fill-opacity="0.1"/></g>
+            <g filter="url(#filter16_f_323_255)"><circle cx="1133.34" cy="390.25" r="10.1739" fill="url(#paint18_radial_323_255)" fill-opacity="0.3"/></g>
+            <circle cx="1133.34" cy="390.251" r="7.04348" fill="url(#paint19_linear_323_255)"/>
+          </g>
+
+          <defs>
+            <filter id="filter0_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter1_f_323_255" x="0" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter2_f_323_255" x="558.095" y="0" width="642.595" height="452.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter3_f_323_255" x="621.095" y="63" width="520.757" height="333.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter4_f_323_255" x="267.034" y="0.5" width="390.561" height="451.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter5_f_323_255" x="543.095" y="1.5" width="390.561" height="450.75" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter6_f_323_255" x="535.095" y="9.25" width="130.5" height="443.467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter7_f_323_255" x="38.3882" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter8_f_323_255" x="51.6926" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter9_f_323_255" x="305.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter10_f_323_255" x="318.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter11_f_323_255" x="571.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter12_f_323_255" x="584.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter13_f_323_255" x="837.388" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter14_f_323_255" x="850.693" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter15_f_323_255" x="1104.39" y="361.293" width="57.913" height="57.913" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="5.47826" result="effect1_foregroundBlur_323_255"/></filter>
+            <filter id="filter16_f_323_255" x="1117.69" y="374.598" width="31.3042" height="31.3042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.73913" result="effect1_foregroundBlur_323_255"/></filter>
+            <linearGradient id="paint0_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint1_linear_323_255" x1="318.845" y1="-7.75005" x2="240.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint2_linear_323_255" x1="881.845" y1="-7.74998" x2="881.845" y2="388.25" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0060EF"/></linearGradient>
+            <linearGradient id="paint3_linear_323_255" x1="881.845" y1="-7.75005" x2="959.845" y2="337.75" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint4_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint5_linear_323_255" x1="459.845" y1="-4.25005" x2="325.477" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint6_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint7_linear_323_255" x1="740.845" y1="-4.25004" x2="875.212" y2="295.397" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint8_linear_323_255" x1="600.345" y1="5.24999" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <linearGradient id="paint9_linear_323_255" x1="600.345" y1="-0.750011" x2="600.69" y2="339.408" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="#0066FF"/></linearGradient>
+            <radialGradient id="paint10_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(66.1709 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
+            <linearGradient id="paint11_linear_323_255" x1="64.6051" y1="384.381" x2="67.3443" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
+            <radialGradient id="paint12_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(333.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
+            <linearGradient id="paint13_linear_323_255" x1="331.605" y1="384.381" x2="334.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
+            <radialGradient id="paint14_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(599.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
+            <linearGradient id="paint15_linear_323_255" x1="597.605" y1="384.381" x2="600.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
+            <radialGradient id="paint16_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(865.171 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
+            <linearGradient id="paint17_linear_323_255" x1="863.605" y1="384.381" x2="866.344" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
+            <radialGradient id="paint18_radial_323_255" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1132.17 387.12) rotate(90) scale(16.8261)"><stop stop-color="white"/><stop offset="1" stop-color="#00D994"/></radialGradient>
+            <linearGradient id="paint19_linear_323_255" x1="1130.61" y1="384.381" x2="1133.34" y2="397.294" gradientUnits="userSpaceOnUse"><stop offset="0.0961538" stop-color="#BBD5FB"/><stop offset="0.546266" stop-color="#0060EF"/><stop offset="1" stop-color="#003789"/></linearGradient>
+          </defs>
+        </svg>
+
+        <ul class="connected__routes">
+          <li class="route">
+            <span class="route__badge"><img src="../assets/connected-systems/icon-resale.svg" alt="" /></span>
+            <span class="route__label">Resale</span>
+          </li>
+          <li class="route">
+            <span class="route__badge"><img src="../assets/connected-systems/icon-marketplace.svg" alt="" /></span>
+            <span class="route__label">Marketplace</span>
+          </li>
+          <li class="route">
+            <span class="route__badge"><img src="../assets/connected-systems/icon-recondition.svg" alt="" /></span>
+            <span class="route__label">Recondition</span>
+          </li>
+          <li class="route">
+            <span class="route__badge"><img src="../assets/connected-systems/icon-donation.svg" alt="" /></span>
+            <span class="route__label">Donation</span>
+          </li>
+          <li class="route">
+            <span class="route__badge"><img src="../assets/connected-systems/icon-recycling.svg" alt="" /></span>
+            <span class="route__label">Recycling</span>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </section>
+
+  <script src="skiply-connected-systems.js"></script>
+</body>
+
+</html>

skiply/skiply-connected-systems.js

@@ -0,0 +1,155 @@
+/* =============================================
+   Skiply.ai — Connected Systems section
+   Scan-the-shoe → distribute-to-tree motion sequence
+   ============================================= */
+
+'use strict';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const section = document.getElementById('connected-systems');
+  const shoeStage = document.getElementById('shoeStage');
+  const horizon = document.getElementById('scanHorizon');
+  const flowLine = document.querySelector('.connected__flow-line');
+  const flowDot = document.querySelector('.connected__flow-dot');
+  const mesh = document.getElementById('shoeMesh');
+  const meshClip = document.getElementById('meshClip');
+  const particlesHost = document.getElementById('scanParticles');
+  const labels = Array.from(document.querySelectorAll('.scan-label'));
+  const treeSvg = document.getElementById('treeSvg');
+  const branchGroups = Array.from(document.querySelectorAll('.connected__branch-group'));
+  const nodes = Array.from(document.querySelectorAll('.connected__node'));
+  const routes = Array.from(document.querySelectorAll('.route'));
+
+  if (!section || !shoeStage || typeof gsap === 'undefined') return;
+
+  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  /* ── Build scan particles ───────────────────── */
+  const PARTICLE_COUNT = 14;
+  const particles = [];
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const p = document.createElement('span');
+    p.className = 'scan-particle';
+    const left = 8 + Math.random() * 84;
+    const top = 6 + Math.random() * 88;
+    const size = 2 + Math.random() * 3;
+    p.style.left = left + '%';
+    p.style.top = top + '%';
+    p.style.width = size + 'px';
+    p.style.height = size + 'px';
+    particlesHost.appendChild(p);
+    particles.push({ el: p, left });
+  }
+
+  /* ── Ambient dust: persistent, independent of the scroll timeline ── */
+  const ambientHost = document.getElementById('ambientParticles');
+  const AMBIENT_COUNT = 22;
+  for (let i = 0; i < AMBIENT_COUNT; i++) {
+    const p = document.createElement('span');
+    p.className = 'ambient-particle';
+    const size = 1.5 + Math.random() * 2;
+    p.style.left = Math.random() * 100 + '%';
+    p.style.top = Math.random() * 100 + '%';
+    p.style.width = size + 'px';
+    p.style.height = size + 'px';
+    p.style.setProperty('--dur', (2.5 + Math.random() * 3).toFixed(2) + 's');
+    p.style.setProperty('--delay', (Math.random() * 4).toFixed(2) + 's');
+    p.style.setProperty('--dx', (Math.random() * 20 - 10).toFixed(1) + 'px');
+    p.style.setProperty('--dy', (-6 - Math.random() * 16).toFixed(1) + 'px');
+    ambientHost.appendChild(p);
+  }
+
+  if (reduceMotion) {
+    gsap.set(shoeStage, { opacity: 1 });
+    gsap.set(mesh, { opacity: 0.75 });
+    gsap.set(meshClip, { '--reveal': '115%' });
+    gsap.set(labels, { opacity: 1, y: 0, scale: 1 });
+    gsap.set(particles.map((p) => p.el), { opacity: 0.6 });
+    gsap.set(horizon, { opacity: 0.85, scaleX: 1 });
+    gsap.set(flowLine, { opacity: 0.7, scaleY: 1 });
+    gsap.set(treeSvg, { opacity: 1 });
+    gsap.set(branchGroups, { clipPath: 'inset(0% 0% 0% 0%)' });
+    gsap.set(nodes, { opacity: 1, scale: 1 });
+    routes.forEach((el) => el.classList.add('is-lit'));
+    return;
+  }
+
+  gsap.set(shoeStage, { opacity: 0 });
+  gsap.set(labels, { opacity: 0, y: 10, scale: 0.9, transformOrigin: '50% 50%' });
+
+  function playIntro() {
+    const tl = gsap.timeline({ defaults: { ease: 'power2.out' } });
+
+    // 1. Stage fades up, ambient glow already pulsing via CSS
+    tl.to(shoeStage, { opacity: 1, duration: 0.5 }, 0);
+
+    // 2. The horizon line is the whole scan effect: it lights up and
+    //    grows outward from center, passing through the shoe and
+    //    extending past its silhouette on both sides. The wireframe
+    //    mesh reveals in step with it.
+    tl.to(horizon, { opacity: 0.85, duration: 0.2 }, 0.3)
+      .to(horizon, { scaleX: 1, duration: 0.6, ease: 'power2.out' }, 0.3)
+      .to(mesh, { opacity: 0.75, duration: 0.2 }, 0.3)
+      .to(meshClip, { '--reveal': '115%', duration: 0.6, ease: 'power2.out' }, 0.3);
+
+    // 3. Particles twinkle in across the same window the horizon grows
+    particles.forEach(({ el, left }) => {
+      const t = 0.3 + (left / 100) * 0.6;
+      tl.to(el, { opacity: 1, duration: 0.25 }, t)
+        .to(el, { opacity: 0.45, y: -4, duration: 0.5 }, t + 0.25);
+    });
+
+    // 4. Annotation labels appear one at a time, each a distinct beat
+    labels.forEach((label, i) => {
+      tl.to(label, { opacity: 1, y: 0, scale: 1, duration: 0.4, ease: 'back.out(1.7)' }, 0.45 + i * 0.32);
+    });
+
+    // 5. The horizon line hands off into a connector that carries the
+    //    light down from the shoe stage into the tree's attachment point.
+    tl.to(flowLine, { opacity: 0.7, scaleY: 1, duration: 0.4, ease: 'power1.out' }, 1.1)
+      .fromTo(flowDot, { opacity: 0, top: '0%' }, { opacity: 1, top: '100%', duration: 0.4, ease: 'power1.in' }, 1.1)
+      .to(flowDot, { opacity: 0, duration: 0.15 }, 1.5);
+
+    // 6. The tree becomes visible, then each branch draws itself in
+    //    center-out: the middle line first, then the two adjacent, then
+    //    the two outer ones — each followed by its node flashing and
+    //    its pill lighting up as the light "arrives".
+    const centerIndex = Math.floor(branchGroups.length / 2);
+    const STEP = 0.22;
+    const BRANCH_DUR = 0.9;
+
+    tl.addLabel('branches', 1.5)
+      .to(treeSvg, { opacity: 1, duration: 0.3 }, 'branches');
+
+    branchGroups.forEach((group, i) => {
+      const pos = `branches+=${(Math.abs(i - centerIndex) * STEP).toFixed(2)}`;
+      tl.fromTo(group,
+        { clipPath: 'inset(0% 0% 100% 0%)' },
+        { clipPath: 'inset(0% 0% 0% 0%)', duration: BRANCH_DUR, ease: 'power2.out' },
+        pos
+      );
+      // Opacity reveal is permanent; the scale punch alone yoyos back down.
+      tl.to(nodes[i], { opacity: 1, duration: 0.15 }, `${pos}+=${BRANCH_DUR - 0.15}`);
+      tl.fromTo(nodes[i],
+        { scale: 1 },
+        { scale: 1.5, duration: 0.18, yoyo: true, repeat: 1, ease: 'power2.out' },
+        `${pos}+=${BRANCH_DUR - 0.15}`
+      );
+      tl.call(() => routes[i].classList.add('is-lit'), null, `${pos}+=${(BRANCH_DUR - 0.05).toFixed(2)}`);
+    });
+
+    return tl;
+  }
+
+  if (typeof ScrollTrigger !== 'undefined') {
+    gsap.registerPlugin(ScrollTrigger);
+    ScrollTrigger.create({
+      trigger: section,
+      start: 'top 70%',
+      once: true,
+      onEnter: playIntro,
+    });
+  } else {
+    playIntro();
+  }
+});

skiply/skiply-fade.css

@@ -0,0 +1,653 @@
+/* =============================================
+   Skiply.ai — Styles
+   Figma: Skiply.ai / node 172-173
+   ============================================= */
+
+/* ── Keyframes ──────────────────────────────── */
+@keyframes truckBounce {
+  from {
+    transform: translate(-50%, -50%) translateY(0px);
+  }
+
+  to {
+    transform: translate(-50%, -50%) translateY(-8px);
+  }
+}
+
+@keyframes dashFlow {
+  to {
+    stroke-dashoffset: -48;
+  }
+}
+
+@keyframes pulseGlow {
+
+  0%,
+  100% {
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+  }
+
+  50% {
+    filter: drop-shadow(0 4px 20px rgba(100, 160, 240, 0.55));
+  }
+}
+
+/* ── Reset & Tokens ─────────────────────────── */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --navy: #0a1a37;
+  --navy-mid: #0d2247;
+  --light-bg: #f6f6f6;
+  --road-blue: #b8c8e8;
+  --road-blue-dark: #8fa8d0;
+  --text-dark: #0a1a37;
+  --text-white: #ffffff;
+
+  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Typography scale matching Figma */
+  --fs-intro: 2.2rem;
+  /* "From" / "We take only"  */
+  --fs-number: 11rem;
+  /* "30" */
+  --fs-number-lg: 12.5rem;
+  /* "15" */
+  --fs-unit: 3.1rem;
+  /* "Days" / "Seconds" */
+  --fs-desc: 1.5rem;
+  /* sub-description */
+  --fs-step-title: 1.5rem;
+  /* "Receive", "Inspect" … */
+  --fs-step-desc: 1.05rem;
+  /* descriptor text */
+
+  --panel-w: 312px;
+  --screen-h: 769px;
+}
+
+html {
+  font-family: var(--font-main);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background: var(--light-bg);
+  color: var(--text-white);
+  overflow-x: hidden;
+}
+
+/* ── Screen wrapper ─────────────────────────── */
+.screen {
+  position: sticky;
+  top: 0;
+  width: 1320px;
+  height: var(--screen-h);
+  margin: 0 auto;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Side Panel ─────────────────────────────── */
+.side-panel {
+  flex-shrink: 0;
+  width: var(--panel-w);
+  height: 100%;
+  background: var(--navy);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 40px 48px 36px;
+  position: relative;
+  z-index: 2;
+}
+
+.side-panel__intro {
+  font-size: var(--fs-intro);
+  font-weight: 400;
+  line-height: 1;
+  margin-bottom: 4px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__number {
+  font-size: var(--fs-number);
+  font-weight: 300;
+  line-height: 0.85;
+  letter-spacing: -0.04em;
+  margin-bottom: 2px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__number--lg {
+  font-size: var(--fs-number-lg);
+}
+
+.side-panel__unit {
+  font-size: var(--fs-unit);
+  font-weight: 400;
+  line-height: 1;
+  margin-bottom: 24px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__desc {
+  font-size: var(--fs-desc);
+  font-weight: 400;
+  line-height: 1.45;
+  color: rgba(255, 255, 255, 0.65);
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* ── Main Content Area ──────────────────────── */
+.main-area {
+  flex: 1;
+  height: 100%;
+  background: var(--light-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Background Decorative Blobs ────────────── */
+.bg-blobs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.35;
+  filter: blur(60px);
+}
+
+.screen--prob1 .blob--1 {
+  width: 600px;
+  height: 500px;
+  background: radial-gradient(ellipse, #a8bfe8 0%, transparent 70%);
+  right: -100px;
+  top: -80px;
+}
+
+.screen--prob1 .blob--2 {
+  width: 400px;
+  height: 350px;
+  background: radial-gradient(ellipse, #c0d4f0 0%, transparent 70%);
+  left: 100px;
+  bottom: -60px;
+}
+
+.screen--prob1 .blob--3 {
+  width: 350px;
+  height: 300px;
+  background: radial-gradient(ellipse, #d4e4f8 0%, transparent 70%);
+  right: 200px;
+  bottom: 100px;
+}
+
+.screen--prob2 .blob--1 {
+  width: 550px;
+  height: 450px;
+  background: radial-gradient(ellipse, #b0c8ec 0%, transparent 70%);
+  right: -80px;
+  top: -60px;
+}
+
+.screen--prob2 .blob--2 {
+  width: 380px;
+  height: 300px;
+  background: radial-gradient(ellipse, #c8daf4 0%, transparent 70%);
+  left: 60px;
+  bottom: -40px;
+}
+
+.screen--prob2 .blob--3 {
+  width: 300px;
+  height: 260px;
+  background: radial-gradient(ellipse, #e0eaf8 0%, transparent 70%);
+  left: 250px;
+  top: 120px;
+}
+
+/* ── Background shoe image (Prob 2) ─────────── */
+.shoe-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.shoe-bg__img {
+  position: absolute;
+  width: 180%;
+  max-width: none;
+  left: -10%;
+  top: -10%;
+  opacity: 0.18;
+  filter: blur(3px);
+  object-fit: cover;
+}
+
+/* ════════════════════════════════════════════
+   PROB 1 — Road / Journey Layout
+   ════════════════════════════════════════════ */
+.road-container {
+  position: absolute;
+  inset: 0;
+}
+
+/* SVG Road */
+.road-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.road-fill {
+  filter: drop-shadow(0 4px 12px rgba(100, 140, 200, 0.3));
+}
+
+.road-dashes {
+  animation: dashFlow 2s linear infinite;
+}
+
+.flow-dashes {
+  animation: dashFlow 2s linear infinite;
+}
+
+/* Removed SVG connector class */
+
+/* ── Road SVG fills the container vertically centred ── */
+.road-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Moving Car (truck) ────────────────────── */
+.road-car {
+  position: absolute;
+  width: 88px;
+  height: 88px;
+  z-index: 10;
+  /* JS will set left/top via transform */
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0;
+  will-change: transform;
+  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
+}
+
+.road-car__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ── Step Icons ─────────────────────────────── */
+.step-icon {
+  position: absolute;
+  width: 71px;
+  height: 71px;
+  z-index: 5;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: transform 0.2s ease;
+}
+
+.step-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.step-icon:hover {
+  transform: translate(-50%, -50%) scale(1.12);
+}
+
+/*
+  Icon positions anchored to the real path geometry.
+  Road SVG viewBox = 983 × 473, rendered inside 983×769 area.
+  xMidYMid meet => rendered SVG height = 473px, top offset = (769-473)/2 = 148px.
+
+  screen_top% = (svgY + 148) / 769 * 100
+    Receive : (384+148)/769 = 69.2%
+    Sort    : (449+148)/769 = 77.6%
+    Inspect : (100+148)/769 = 32.3%
+    Hold    : ( 24+148)/769 = 22.4%
+    Route   : (178+148)/769 = 42.4%
+
+  JS will override these with precise pixel positions after render.
+  These are fallback values only.
+*/
+.step-icon--receive {
+  left: 11.3%;
+  top: 69.2%;
+}
+
+.step-icon--sort {
+  left: 36.7%;
+  top: 77.6%;
+}
+
+.step-icon--inspect {
+  left: 49.5%;
+  top: 32.3%;
+}
+
+.step-icon--hold {
+  left: 75.2%;
+  top: 22.4%;
+}
+
+.step-icon--route {
+  left: 87.7%;
+  top: 42.4%;
+}
+
+/* ── Step Labels ─────────────────────────────── */
+.step-label {
+  position: absolute;
+  z-index: 6;
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.step-label--inspect,
+.step-label--sort,
+.step-label--route {
+  padding-left: 12px;
+}
+
+.step-label::before {
+  content: "";
+  position: absolute;
+  opacity: 0.5;
+}
+
+.step-label--receive::before {
+  right: -60px; 
+  bottom: 100%;
+  width: calc(100% + 60px); 
+  height: 190px;
+  border-bottom: 1.5px solid var(--navy);
+  border-right: 1.5px solid var(--navy);
+  background-color: transparent;
+}
+
+.step-label--inspect::before {
+  left: 0;
+  top: -10px;
+  width: 1.5px;
+  height: 360px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label--sort::before {
+  left: 0;
+  bottom: 100%;
+  width: 1.5px;
+  height: 400px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label--hold::before {
+  right: -60px;
+  top: -10px;
+  width: calc(100% + 60px);
+  height: 230px; 
+  border-top: 1.5px solid var(--navy);
+  border-right: 1.5px solid var(--navy);
+  background-color: transparent;
+}
+
+.step-label--route::before {
+  left: 0;
+  bottom: 100%;
+  width: 1.5px;
+  height: 300px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label__title {
+  display: block;
+  font-size: var(--fs-step-title);
+  font-weight: 600;
+  color: var(--text-dark);
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.step-label__desc {
+  display: block;
+  font-size: var(--fs-step-desc);
+  font-weight: 400;
+  color: var(--text-dark);
+  line-height: 1.45;
+  max-width: 185px;
+}
+
+/*
+  Label positions (pre-computed, same logic as icons).
+  Bottom labels (receive, sort, route): icon top% + ~5.7% (44px/769)
+  Top labels (inspect, hold):           icon top% - ~11.7% (90px/769)
+*/
+.step-label--receive {
+  left: 7%;
+  top: 74.9%;
+}
+
+/* 69.2 + 5.7 */
+.step-label--sort {
+  left: 33%;
+  top: 83.3%;
+}
+
+/* 77.6 + 5.7 */
+.step-label--inspect {
+  left: 46%;
+  top: 20.6%;
+}
+
+/* 32.3 - 11.7 */
+.step-label--hold {
+  left: 71%;
+  top: 10.7%;
+}
+
+/* 22.4 - 11.7 */
+.step-label--route {
+  left: 84%;
+  top: 48.1%;
+}
+
+/* 42.4 + 5.7 */
+
+/* ════════════════════════════════════════════
+   PROB 2 — Scan → Decision Flow Layout
+   ════════════════════════════════════════════ */
+.flow-container {
+  position: absolute;
+  inset: 0;
+}
+
+/* SVG Flow Path */
+.flow-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Shoe icon in center ────────────────────── */
+.flow-shoe-icon {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(-2.69deg);
+  z-index: 8;
+  opacity: 0;
+  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
+}
+
+.flow-shoe-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ── Flow Nodes ─────────────────────────────── */
+.flow-node {
+  position: absolute;
+  width: 71px;
+  height: 71px;
+  z-index: 7;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: transform 0.2s ease;
+}
+
+.flow-node img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.flow-node:hover {
+  transform: translate(-50%, -50%) scale(1.12);
+}
+
+/* Positions (% within 983px × 769px main area) */
+.flow-node--scan {
+  left: 29%;
+  top: 61%;
+}
+
+.flow-node--decision {
+  left: 67%;
+  top: 37%;
+}
+
+/* ── Flow Labels ─────────────────────────────── */
+.flow-label {
+  position: absolute;
+  z-index: 8;
+  opacity: 0;
+  transform: translateY(8px);
+  padding-left: 12px;
+}
+
+.flow-label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 1.5px;
+  background-color: var(--navy);
+  opacity: 0.5;
+}
+
+.flow-label--scan::before {
+  top: -45px;
+  height: 45px;
+}
+
+.flow-label--decision::before {
+  bottom: -45px;
+  height: 45px;
+}
+
+.flow-label--scan {
+  left: 22%;
+  top: 70%;
+}
+
+.flow-label--decision {
+  left: 60%;
+  top: 20%;
+}
+
+/* ── Spacing between two screens ─────────────── */
+.screen+.screen {
+  margin-top: 0;
+  border-top: 2px solid rgba(255, 255, 255, 0.06);
+}
+
+/* ═══════════════════════════════════════════════
+   Responsive – scale for smaller viewports
+   ═══════════════════════════════════════════════ */
+@media (max-width: 1340px) {
+  .screen {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1320 / 769;
+  }
+
+  :root {
+    --fs-number: 8vw;
+    --fs-number-lg: 9vw;
+    --fs-unit: 2.2vw;
+    --fs-intro: 1.6vw;
+    --fs-desc: 1.1vw;
+    --fs-step-title: 1.1vw;
+    --fs-step-desc: 0.8vw;
+    --panel-w: 23.6%;
+  }
+}
+
+@media (max-width: 768px) {
+  .screen {
+    flex-direction: column;
+    height: auto;
+    aspect-ratio: unset;
+    width: 100%;
+  }
+
+  .side-panel {
+    width: 100%;
+    height: auto;
+    padding: 40px 32px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .main-area {
+    min-height: 420px;
+    width: 100%;
+  }
+
+  :root {
+    --fs-number: 20vw;
+    --fs-number-lg: 22vw;
+    --fs-unit: 8vw;
+    --fs-intro: 5vw;
+    --fs-desc: 3.5vw;
+    --fs-step-title: 3vw;
+    --fs-step-desc: 2.2vw;
+  }
+}
+
+
+
+
+

skiply/skiply.css

@@ -0,0 +1,653 @@
+/* =============================================
+   Skiply.ai — Styles
+   Figma: Skiply.ai / node 172-173
+   ============================================= */
+
+/* ── Keyframes ──────────────────────────────── */
+@keyframes truckBounce {
+  from {
+    transform: translate(-50%, -50%) translateY(0px);
+  }
+
+  to {
+    transform: translate(-50%, -50%) translateY(-8px);
+  }
+}
+
+@keyframes dashFlow {
+  to {
+    stroke-dashoffset: -48;
+  }
+}
+
+@keyframes pulseGlow {
+
+  0%,
+  100% {
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
+  }
+
+  50% {
+    filter: drop-shadow(0 4px 20px rgba(100, 160, 240, 0.55));
+  }
+}
+
+/* ── Reset & Tokens ─────────────────────────── */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --navy: #0a1a37;
+  --navy-mid: #0d2247;
+  --light-bg: #f6f6f6;
+  --road-blue: #b8c8e8;
+  --road-blue-dark: #8fa8d0;
+  --text-dark: #0a1a37;
+  --text-white: #ffffff;
+
+  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+  /* Typography scale matching Figma */
+  --fs-intro: 2.2rem;
+  /* "From" / "We take only"  */
+  --fs-number: 11rem;
+  /* "30" */
+  --fs-number-lg: 12.5rem;
+  /* "15" */
+  --fs-unit: 3.1rem;
+  /* "Days" / "Seconds" */
+  --fs-desc: 1.5rem;
+  /* sub-description */
+  --fs-step-title: 1.5rem;
+  /* "Receive", "Inspect" … */
+  --fs-step-desc: 1.05rem;
+  /* descriptor text */
+
+  --panel-w: 312px;
+  --screen-h: 769px;
+}
+
+html {
+  font-family: var(--font-main);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  background: var(--light-bg);
+  color: var(--text-white);
+  overflow-x: hidden;
+}
+
+/* ── Screen wrapper ─────────────────────────── */
+.screen {
+  position: sticky;
+  top: 0;
+  width: 1320px;
+  height: var(--screen-h);
+  margin: 0 auto;
+  display: flex;
+  overflow: hidden;
+}
+
+/* ── Side Panel ─────────────────────────────── */
+.side-panel {
+  flex-shrink: 0;
+  width: var(--panel-w);
+  height: 100%;
+  background: var(--navy);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 48px 40px 48px 36px;
+  position: relative;
+  z-index: 2;
+}
+
+.side-panel__intro {
+  font-size: var(--fs-intro);
+  font-weight: 400;
+  line-height: 1;
+  margin-bottom: 4px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__number {
+  font-size: var(--fs-number);
+  font-weight: 300;
+  line-height: 0.85;
+  letter-spacing: -0.04em;
+  margin-bottom: 2px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__number--lg {
+  font-size: var(--fs-number-lg);
+}
+
+.side-panel__unit {
+  font-size: var(--fs-unit);
+  font-weight: 400;
+  line-height: 1;
+  margin-bottom: 24px;
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.side-panel__desc {
+  font-size: var(--fs-desc);
+  font-weight: 400;
+  line-height: 1.45;
+  color: rgba(255, 255, 255, 0.65);
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* ── Main Content Area ──────────────────────── */
+.main-area {
+  flex: 1;
+  height: 100%;
+  background: var(--light-bg);
+  position: relative;
+  overflow: hidden;
+}
+
+/* ── Background Decorative Blobs ────────────── */
+.bg-blobs {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.blob {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.35;
+  filter: blur(60px);
+}
+
+.screen--prob1 .blob--1 {
+  width: 600px;
+  height: 500px;
+  background: radial-gradient(ellipse, #a8bfe8 0%, transparent 70%);
+  right: -100px;
+  top: -80px;
+}
+
+.screen--prob1 .blob--2 {
+  width: 400px;
+  height: 350px;
+  background: radial-gradient(ellipse, #c0d4f0 0%, transparent 70%);
+  left: 100px;
+  bottom: -60px;
+}
+
+.screen--prob1 .blob--3 {
+  width: 350px;
+  height: 300px;
+  background: radial-gradient(ellipse, #d4e4f8 0%, transparent 70%);
+  right: 200px;
+  bottom: 100px;
+}
+
+.screen--prob2 .blob--1 {
+  width: 550px;
+  height: 450px;
+  background: radial-gradient(ellipse, #b0c8ec 0%, transparent 70%);
+  right: -80px;
+  top: -60px;
+}
+
+.screen--prob2 .blob--2 {
+  width: 380px;
+  height: 300px;
+  background: radial-gradient(ellipse, #c8daf4 0%, transparent 70%);
+  left: 60px;
+  bottom: -40px;
+}
+
+.screen--prob2 .blob--3 {
+  width: 300px;
+  height: 260px;
+  background: radial-gradient(ellipse, #e0eaf8 0%, transparent 70%);
+  left: 250px;
+  top: 120px;
+}
+
+/* ── Background shoe image (Prob 2) ─────────── */
+.shoe-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.shoe-bg__img {
+  position: absolute;
+  width: 180%;
+  max-width: none;
+  left: -10%;
+  top: -10%;
+  opacity: 0.18;
+  filter: blur(3px);
+  object-fit: cover;
+}
+
+/* ════════════════════════════════════════════
+   PROB 1 — Road / Journey Layout
+   ════════════════════════════════════════════ */
+.road-container {
+  position: absolute;
+  inset: 0;
+}
+
+/* SVG Road */
+.road-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.road-fill {
+  filter: drop-shadow(0 4px 12px rgba(100, 140, 200, 0.3));
+}
+
+.road-dashes {
+  animation: dashFlow 2s linear infinite;
+}
+
+.flow-dashes {
+  animation: dashFlow 2s linear infinite;
+}
+
+/* Removed SVG connector class */
+
+/* ── Road SVG fills the container vertically centred ── */
+.road-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Moving Car (truck) ────────────────────── */
+.road-car {
+  position: absolute;
+  width: 88px;
+  height: 88px;
+  z-index: 10;
+  /* JS will set left/top via transform */
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0;
+  will-change: transform;
+  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
+}
+
+.road-car__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ── Step Icons ─────────────────────────────── */
+.step-icon {
+  position: absolute;
+  width: 71px;
+  height: 71px;
+  z-index: 5;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: transform 0.2s ease;
+}
+
+.step-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.step-icon:hover {
+  transform: translate(-50%, -50%) scale(1.12);
+}
+
+/*
+  Icon positions anchored to the real path geometry.
+  Road SVG viewBox = 983 × 473, rendered inside 983×769 area.
+  xMidYMid meet => rendered SVG height = 473px, top offset = (769-473)/2 = 148px.
+
+  screen_top% = (svgY + 148) / 769 * 100
+    Receive : (384+148)/769 = 69.2%
+    Sort    : (449+148)/769 = 77.6%
+    Inspect : (100+148)/769 = 32.3%
+    Hold    : ( 24+148)/769 = 22.4%
+    Route   : (178+148)/769 = 42.4%
+
+  JS will override these with precise pixel positions after render.
+  These are fallback values only.
+*/
+.step-icon--receive {
+  left: 11.3%;
+  top: 69.2%;
+}
+
+.step-icon--sort {
+  left: 36.7%;
+  top: 77.6%;
+}
+
+.step-icon--inspect {
+  left: 49.5%;
+  top: 32.3%;
+}
+
+.step-icon--hold {
+  left: 75.2%;
+  top: 22.4%;
+}
+
+.step-icon--route {
+  left: 87.7%;
+  top: 42.4%;
+}
+
+/* ── Step Labels ─────────────────────────────── */
+.step-label {
+  position: absolute;
+  z-index: 6;
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.step-label--inspect,
+.step-label--sort,
+.step-label--route {
+  padding-left: 12px;
+}
+
+.step-label::before {
+  content: "";
+  position: absolute;
+  opacity: 0.5;
+}
+
+.step-label--receive::before {
+  right: -60px; 
+  bottom: 100%;
+  width: calc(100% + 60px); 
+  height: 190px;
+  border-bottom: 1.5px solid var(--navy);
+  border-right: 1.5px solid var(--navy);
+  background-color: transparent;
+}
+
+.step-label--inspect::before {
+  left: 0;
+  top: -10px;
+  width: 1.5px;
+  height: 360px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label--sort::before {
+  left: 0;
+  bottom: 100%;
+  width: 1.5px;
+  height: 400px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label--hold::before {
+  right: -60px;
+  top: -10px;
+  width: calc(100% + 60px);
+  height: 230px; 
+  border-top: 1.5px solid var(--navy);
+  border-right: 1.5px solid var(--navy);
+  background-color: transparent;
+}
+
+.step-label--route::before {
+  left: 0;
+  bottom: 100%;
+  width: 1.5px;
+  height: 300px;
+  background-color: var(--navy);
+  border: none;
+}
+
+.step-label__title {
+  display: block;
+  font-size: var(--fs-step-title);
+  font-weight: 600;
+  color: var(--text-dark);
+  line-height: 1;
+  margin-bottom: 6px;
+}
+
+.step-label__desc {
+  display: block;
+  font-size: var(--fs-step-desc);
+  font-weight: 400;
+  color: var(--text-dark);
+  line-height: 1.45;
+  max-width: 185px;
+}
+
+/*
+  Label positions (pre-computed, same logic as icons).
+  Bottom labels (receive, sort, route): icon top% + ~5.7% (44px/769)
+  Top labels (inspect, hold):           icon top% - ~11.7% (90px/769)
+*/
+.step-label--receive {
+  left: 7%;
+  top: 74.9%;
+}
+
+/* 69.2 + 5.7 */
+.step-label--sort {
+  left: 33%;
+  top: 83.3%;
+}
+
+/* 77.6 + 5.7 */
+.step-label--inspect {
+  left: 46%;
+  top: 20.6%;
+}
+
+/* 32.3 - 11.7 */
+.step-label--hold {
+  left: 71%;
+  top: 10.7%;
+}
+
+/* 22.4 - 11.7 */
+.step-label--route {
+  left: 84%;
+  top: 48.1%;
+}
+
+/* 42.4 + 5.7 */
+
+/* ════════════════════════════════════════════
+   PROB 2 — Scan → Decision Flow Layout
+   ════════════════════════════════════════════ */
+.flow-container {
+  position: absolute;
+  inset: 0;
+}
+
+/* SVG Flow Path */
+.flow-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Shoe icon in center ────────────────────── */
+.flow-shoe-icon {
+  position: absolute;
+  width: 96px;
+  height: 96px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(-2.69deg);
+  z-index: 8;
+  opacity: 0;
+  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.15));
+}
+
+.flow-shoe-icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* ── Flow Nodes ─────────────────────────────── */
+.flow-node {
+  position: absolute;
+  width: 71px;
+  height: 71px;
+  z-index: 7;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: transform 0.2s ease;
+}
+
+.flow-node img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.flow-node:hover {
+  transform: translate(-50%, -50%) scale(1.12);
+}
+
+/* Positions (% within 983px × 769px main area) */
+.flow-node--scan {
+  left: 29%;
+  top: 61%;
+}
+
+.flow-node--decision {
+  left: 67%;
+  top: 37%;
+}
+
+/* ── Flow Labels ─────────────────────────────── */
+.flow-label {
+  position: absolute;
+  z-index: 8;
+  opacity: 0;
+  transform: translateY(8px);
+  padding-left: 12px;
+}
+
+.flow-label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 1.5px;
+  background-color: var(--navy);
+  opacity: 0.5;
+}
+
+.flow-label--scan::before {
+  top: -45px;
+  height: 45px;
+}
+
+.flow-label--decision::before {
+  bottom: -45px;
+  height: 45px;
+}
+
+.flow-label--scan {
+  left: 22%;
+  top: 70%;
+}
+
+.flow-label--decision {
+  left: 60%;
+  top: 20%;
+}
+
+/* ── Spacing between two screens ─────────────── */
+.screen+.screen {
+  margin-top: 0;
+  border-top: 2px solid rgba(255, 255, 255, 0.06);
+}
+
+/* ═══════════════════════════════════════════════
+   Responsive – scale for smaller viewports
+   ═══════════════════════════════════════════════ */
+@media (max-width: 1340px) {
+  .screen {
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1320 / 769;
+  }
+
+  :root {
+    --fs-number: 8vw;
+    --fs-number-lg: 9vw;
+    --fs-unit: 2.2vw;
+    --fs-intro: 1.6vw;
+    --fs-desc: 1.1vw;
+    --fs-step-title: 1.1vw;
+    --fs-step-desc: 0.8vw;
+    --panel-w: 23.6%;
+  }
+}
+
+@media (max-width: 768px) {
+  .screen {
+    flex-direction: column;
+    height: auto;
+    aspect-ratio: unset;
+    width: 100%;
+  }
+
+  .side-panel {
+    width: 100%;
+    height: auto;
+    padding: 40px 32px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .main-area {
+    min-height: 420px;
+    width: 100%;
+  }
+
+  :root {
+    --fs-number: 20vw;
+    --fs-number-lg: 22vw;
+    --fs-unit: 8vw;
+    --fs-intro: 5vw;
+    --fs-desc: 3.5vw;
+    --fs-step-title: 3vw;
+    --fs-step-desc: 2.2vw;
+  }
+}
+
+
+
+
+