body{margin:0;background:rgb(229, 228, 223);} * { box-sizing: border-box; } @media (max-width:920px){ .grid-2{grid-template-columns:1fr!important} .grid-3{grid-template-columns:1fr!important} .grid-6{grid-template-columns:1fr 1fr!important} .life-row{flex-direction:row!important;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch} .life-row button{flex:none;min-width:90px;scroll-snap-align:start} .life-arrow{transform:none} } /* Scroll fade-up */ .fade-section { opacity:0; transform:translateY(22px); transition:opacity 0.75s ease, transform 0.75s cubic-bezier(0.22,1,0.36,1); } .fade-section.visible { opacity:1; transform:none; } .fade-card { opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); } .fade-card.visible { opacity:1; transform:none; } @keyframes heroIn { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } .hero-panel { animation:heroIn 0.75s ease 0.2s both; } @media(prefers-reduced-motion:reduce){.hero-panel{animation:none;opacity:1;transform:none}} .side-rail{position:fixed;left:14px;top:50%;transform:translateY(-50%) translateX(-30px);z-index:60;display:flex;flex-direction:column;gap:10px;background:rgba(248,247,244,0.94);backdrop-filter:blur(8px);padding:12px 8px;border-radius:18px;box-shadow:0 6px 20px rgba(0,0,0,0.14);border:1px solid rgba(0,0,0,0.06);opacity:0;transition:opacity 0.35s ease,transform 0.35s cubic-bezier(0.22,1,0.36,1);pointer-events:none} .side-rail.visible{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto} .rail-item{display:flex;align-items:center;gap:8px;text-decoration:none;padding:1px 0} .rail-dot{width:6px;height:6px;border-radius:50%;background:oklch(80% 0.01 85);flex:none;transition:background 0.2s,transform 0.2s} .rail-item.active .rail-dot{background:#C4622A;transform:scale(1.4)} .rail-label{font-family:Figtree,sans-serif;font-size:11px;font-weight:600;color:#1C2B2B;opacity:0;transform:translateX(-6px);transition:opacity 0.2s,transform 0.2s;white-space:nowrap;pointer-events:none} .side-rail:hover .rail-label{opacity:1;transform:none} @media(max-width:1300px){.side-rail{display:none}} @keyframes dustDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,calc(-2.5*var(--dust-y,4px)))}} .dust-dot{animation-name:dustDrift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform} @media(prefers-reduced-motion:reduce){.dust-dot{animation:none}} @media(max-width:640px){.dust-dot:nth-of-type(n+16){animation:none}} @keyframes arcDotL{0%{offset-distance:0%;opacity:0}8%{opacity:1}50%{offset-distance:50%;opacity:1}65%,100%{offset-distance:50%;opacity:0}} @keyframes arcDotR{0%{offset-distance:100%;opacity:0}8%{opacity:1}50%{offset-distance:50%;opacity:1}65%,100%{offset-distance:50%;opacity:0}} @keyframes arcPulse{0%,49%{transform:scale(1)}55%{transform:scale(1.35)}68%,100%{transform:scale(1)}} .arc-tdl{animation:arcDotL 2.8s cubic-bezier(0.4,0,0.2,1) infinite;offset-path:path('M 2.5 30.5 A 25 28 0 0 1 52.5 30.5')} .arc-tdr{animation:arcDotR 2.8s cubic-bezier(0.4,0,0.2,1) infinite;offset-path:path('M 2.5 30.5 A 25 28 0 0 1 52.5 30.5')} .arc-conn{transform-origin:27.5px 22.5px;animation:arcPulse 2.8s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.arc-tdl,.arc-tdr,.arc-conn{animation:none}} .dc-platform-f128c69e{background:#1C2B2B;padding:88px 64px 72px;text-align:center;position:relative;overflow:hidden} .dc-platform-b98bc6ed{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .dc-platform-4d7df4c5{position:absolute;left:11.5%;top:24.4%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.23;animation-duration:5.2s;animation-delay:-7.9s;--dust-y:5px} .dc-platform-55d41847{position:absolute;left:7.7%;top:49.9%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:5.4s;animation-delay:-5.0s;--dust-y:5px} .dc-platform-a9d0c120{position:absolute;left:17.6%;top:5%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.32;animation-duration:5.3s;animation-delay:-4.0s;--dust-y:7px} .dc-platform-e5d0747f{position:absolute;left:18.9%;top:41.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:5.9s;animation-delay:-1.5s;--dust-y:7px} .dc-platform-39fc627c{position:absolute;left:15.4%;top:77.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.20;animation-duration:5.2s;animation-delay:-8.3s;--dust-y:4px} .dc-platform-6c8a08e2{position:absolute;left:88.4%;top:47.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.25;animation-duration:6.3s;animation-delay:-6.8s;--dust-y:6px} .dc-platform-57f8b9be{position:absolute;left:13.6%;top:22.4%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:5.1s;animation-delay:-3.7s;--dust-y:6px} .dc-platform-ed6918b7{position:absolute;left:64.7%;top:95.5%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:6.6s;animation-delay:-3.9s;--dust-y:6px} .dc-platform-33b9c75c{position:absolute;left:74.3%;top:13.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:7.8s;animation-delay:-8.7s;--dust-y:7px} .dc-platform-f5cc6c4d{position:absolute;left:86%;top:74.7%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.24;animation-duration:5.0s;animation-delay:-2.9s;--dust-y:4px} .dc-platform-ce38e993{position:absolute;left:26.7%;top:95.6%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.20;animation-duration:6.9s;animation-delay:-4.0s;--dust-y:3px} .dc-platform-60044154{position:absolute;left:99.1%;top:45.6%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.25;animation-duration:6.5s;animation-delay:-1.1s;--dust-y:6px} .dc-platform-8c404bf5{position:absolute;left:89.6%;top:26.4%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:7.3s;animation-delay:-6.3s;--dust-y:6px} .dc-platform-2506aa3b{position:absolute;left:87%;top:23%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:5.1s;animation-delay:-0.7s;--dust-y:3px} .dc-platform-5ef92c86{position:absolute;left:53.7%;top:83.1%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:6.6s;animation-delay:-0.5s;--dust-y:4px} .dc-platform-de10b530{position:absolute;left:48.8%;top:6.4%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.18;animation-duration:5.9s;animation-delay:-7.1s;--dust-y:4px} .dc-platform-c1a0375c{position:absolute;left:16.5%;top:0.1%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:6.3s;animation-delay:-1.0s;--dust-y:5px} .dc-platform-123152e3{position:absolute;left:41.5%;top:0.8%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:7.4s;animation-delay:-3.0s;--dust-y:7px} .dc-platform-88eae8bf{position:absolute;left:7.7%;top:88.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:5.6s;animation-delay:-2.7s;--dust-y:3px} .dc-platform-2a60aa2f{position:absolute;left:90.6%;top:52.8%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:7.9s;animation-delay:-6.0s;--dust-y:5px} .dc-platform-8ed365f8{position:absolute;left:90.6%;top:67.8%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.32;animation-duration:7.9s;animation-delay:-3.7s;--dust-y:5px} .dc-platform-3963ff78{position:absolute;left:91.5%;top:54.5%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:7.7s;animation-delay:-4.0s;--dust-y:3px} .dc-platform-0c7a0875{position:absolute;left:97.3%;top:55.5%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:7.4s;animation-delay:-7.0s;--dust-y:5px} .dc-platform-e980b1e6{position:absolute;left:44.4%;top:88.2%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:6.2s;animation-delay:-4.2s;--dust-y:7px} .dc-platform-b8870bea{position:absolute;left:65.9%;top:15.4%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:5.6s;animation-delay:-4.7s;--dust-y:4px} .dc-platform-5420ec54{position:absolute;left:2.2%;top:95.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:6.2s;animation-delay:-1.7s;--dust-y:6px} .dc-platform-64d329fa{position:absolute;left:30.5%;top:90.8%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:7.7s;animation-delay:-1.6s;--dust-y:4px} .dc-platform-6e02117e{position:absolute;left:41.7%;top:89.4%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:5.5s;animation-delay:-4.4s;--dust-y:4px} .dc-platform-8f52a61e{position:absolute;left:33.1%;top:2.8%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:6.4s;animation-delay:-5.0s;--dust-y:7px} .dc-platform-9fe5be82{position:absolute;left:10.5%;top:40.5%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:5.1s;animation-delay:-1.1s;--dust-y:6px} .dc-platform-49dc4cb4{position:absolute;left:85.1%;top:2.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.19;animation-duration:6.1s;animation-delay:-2.1s;--dust-y:6px} .dc-platform-93d8f9ed{position:absolute;left:62.8%;top:88.7%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:8.1s;animation-delay:-7.2s;--dust-y:5px} .dc-platform-ef4950f2{position:absolute;left:8.6%;top:21.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.27;animation-duration:6.9s;animation-delay:-8.7s;--dust-y:4px} .dc-platform-1e06a0bf{position:absolute;left:15.9%;top:92%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.29;animation-duration:7.3s;animation-delay:-2.5s;--dust-y:5px} .dc-platform-cace165d{position:absolute;left:13.2%;top:70.9%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.25;animation-duration:6.1s;animation-delay:-3.0s;--dust-y:5px} .dc-platform-fbb3624e{position:absolute;left:56.7%;top:12.4%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.30;animation-duration:7.4s;animation-delay:-4.7s;--dust-y:5px} .dc-platform-4b2764ee{position:absolute;left:8.7%;top:14.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.31;animation-duration:7.4s;animation-delay:-8.3s;--dust-y:5px} .dc-platform-08d1d045{position:absolute;left:86.4%;top:44.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.31;animation-duration:6.1s;animation-delay:-2.2s;--dust-y:4px} .dc-platform-5cf8ff11{position:absolute;left:5.1%;top:35.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.33;animation-duration:7.6s;animation-delay:-5.5s;--dust-y:5px} .dc-platform-5d2385cd{position:absolute;left:5.3%;top:46.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.23;animation-duration:6.0s;animation-delay:-2.2s;--dust-y:5px} .dc-platform-5b927aa5{position:absolute;left:49.1%;top:9.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.23;animation-duration:6.5s;animation-delay:-0.0s;--dust-y:5px} .dc-platform-f2f7c8fd{position:absolute;left:9.9%;top:8.8%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:7.2s;animation-delay:-8.6s;--dust-y:6px} .dc-platform-b9d2f29c{position:absolute;left:16.7%;top:0.3%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.33;animation-duration:7.8s;animation-delay:-6.8s;--dust-y:5px} .dc-platform-ac1f9de1{position:absolute;left:91.4%;top:1.9%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.25;animation-duration:5.2s;animation-delay:-5.7s;--dust-y:4px} .dc-platform-c074ace1{position:absolute;left:29.9%;top:94.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:7.2s;animation-delay:-6.4s;--dust-y:3px} .dc-platform-ba148422{position:absolute;left:24.5%;top:12.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:5.8s;animation-delay:-4.5s;--dust-y:5px} .dc-platform-2dd609b2{position:absolute;left:52.8%;top:94.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.20;animation-duration:5.2s;animation-delay:-1.3s;--dust-y:4px} .dc-platform-a7e409b7{position:absolute;left:32.9%;top:11.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:6.3s;animation-delay:-2.8s;--dust-y:6px} .dc-platform-1c0aa358{position:absolute;left:89.1%;top:67.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:6.5s;animation-delay:-2.3s;--dust-y:6px} .dc-platform-5f965a19{position:absolute;left:86.6%;top:10.7%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:5.7s;animation-delay:-7.0s;--dust-y:6px} .dc-platform-beff2961{position:absolute;left:10.3%;top:45.3%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:6.3s;animation-delay:-2.6s;--dust-y:3px} .dc-platform-b83c522c{position:absolute;left:32%;top:2.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:6.8s;animation-delay:-0.2s;--dust-y:6px} .dc-platform-fce3ffe6{position:absolute;left:76.6%;top:8.4%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.29;animation-duration:8.0s;animation-delay:-2.1s;--dust-y:4px} .dc-platform-90864da3{position:absolute;left:38.6%;top:90.6%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.30;animation-duration:6.3s;animation-delay:-3.5s;--dust-y:6px} .dc-platform-b34b8236{position:absolute;left:17%;top:79.6%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.25;animation-duration:6.1s;animation-delay:-5.7s;--dust-y:3px} .dc-platform-f47c41c2{position:absolute;left:9%;top:52%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.13;animation-duration:8.2s;animation-delay:-5.6s;--dust-y:4px} .dc-platform-fc44445f{position:absolute;left:24%;top:94.9%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.27;animation-duration:7.0s;animation-delay:-3.6s;--dust-y:6px} .dc-platform-d6d47c97{position:absolute;left:9.4%;top:13.4%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:7.8s;animation-delay:-5.9s;--dust-y:3px} .dc-platform-9e3663c8{position:absolute;left:1.8%;top:18.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.33;animation-duration:5.0s;animation-delay:-0.2s;--dust-y:4px} .dc-platform-c4e2e524{position:absolute;left:11.9%;top:25.4%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.15;animation-duration:6.6s;animation-delay:-0.3s;--dust-y:5px} .dc-platform-bb9e3b01{position:absolute;left:94.9%;top:30.4%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:7.3s;animation-delay:-0.1s;--dust-y:4px} .dc-platform-61167584{position:absolute;left:77.1%;top:96.8%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.18;animation-duration:5.6s;animation-delay:-6.1s;--dust-y:4px} .dc-platform-78b5116d{position:absolute;left:31.2%;top:92.3%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.13;animation-duration:6.0s;animation-delay:-2.8s;--dust-y:6px} .dc-platform-b05e5ae9{position:absolute;left:98.4%;top:76%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.20;animation-duration:7.3s;animation-delay:-5.0s;--dust-y:6px} .dc-platform-7dca88d1{position:absolute;left:81%;top:75%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:7.2s;animation-delay:-5.4s;--dust-y:3px} .dc-platform-d63ebfdc{position:absolute;left:78.7%;top:99.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:6.4s;animation-delay:-3.4s;--dust-y:4px} .dc-platform-3aa15676{position:absolute;left:24.3%;top:16.6%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:5.9s;animation-delay:-4.4s;--dust-y:4px} .dc-platform-5f1e7b16{position:absolute;left:10.5%;top:68.7%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.14;animation-duration:5.5s;animation-delay:-0.9s;--dust-y:5px} .dc-platform-8835dc05{position:absolute;left:7.8%;top:60.3%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.32;animation-duration:6.3s;animation-delay:-4.5s;--dust-y:6px} .dc-platform-b488961c{position:absolute;left:14.6%;top:91%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.18;animation-duration:6.5s;animation-delay:-0.6s;--dust-y:3px} .dc-platform-43c1a13b{position:absolute;left:19.4%;top:78.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.30;animation-duration:6.1s;animation-delay:-5.9s;--dust-y:5px} .dc-platform-28f20708{position:absolute;left:75.2%;top:90.6%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:7.8s;animation-delay:-6.5s;--dust-y:6px} .dc-platform-535b6a41{position:absolute;left:97.9%;top:0.5%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:8.2s;animation-delay:-8.9s;--dust-y:4px} .dc-platform-f1520f5d{position:absolute;left:5.8%;top:78.6%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.26;animation-duration:8.0s;animation-delay:-0.9s;--dust-y:4px} .dc-platform-d4b0617e{position:absolute;left:80%;top:13.4%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.30;animation-duration:7.6s;animation-delay:-7.2s;--dust-y:5px} .dc-platform-e6655a2a{position:absolute;left:9.5%;top:73.3%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.16;animation-duration:7.6s;animation-delay:-6.0s;--dust-y:3px} .dc-platform-630934c4{position:absolute;left:12%;top:31.1%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.31;animation-duration:6.8s;animation-delay:-4.6s;--dust-y:6px} .dc-platform-0c8c9d3c{position:absolute;left:12.4%;top:11.8%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:5.8s;animation-delay:-5.3s;--dust-y:3px} .dc-platform-a07a80fb{position:absolute;left:22.7%;top:94.5%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:7.1s;animation-delay:-7.9s;--dust-y:4px} .dc-platform-f94ab680{position:absolute;left:14.6%;top:97.2%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.30;animation-duration:5.2s;animation-delay:-3.8s;--dust-y:3px} .dc-platform-25cb9537{position:absolute;left:42.9%;top:92.1%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.17;animation-duration:6.7s;animation-delay:-3.7s;--dust-y:6px} .dc-platform-0526164f{position:absolute;left:69.2%;top:9.8%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.19;animation-duration:8.0s;animation-delay:-5.7s;--dust-y:7px} .dc-platform-aa462d6e{position:absolute;left:67.7%;top:92.9%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.28;animation-duration:5.0s;animation-delay:-3.1s;--dust-y:5px} .dc-platform-fe86afce{position:absolute;left:34%;top:86.2%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.19;animation-duration:5.4s;animation-delay:-1.3s;--dust-y:4px} .dc-platform-b0708fdd{position:absolute;left:69.1%;top:13.4%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.23;animation-duration:7.6s;animation-delay:-3.8s;--dust-y:5px} .dc-platform-e7e9e6e5{position:absolute;left:18.3%;top:84%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.27;animation-duration:6.7s;animation-delay:-0.9s;--dust-y:6px} .dc-platform-2623932d{position:absolute;left:92.5%;top:40.4%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.21;animation-duration:7.0s;animation-delay:-2.3s;--dust-y:5px} .dc-platform-5e258861{position:absolute;left:17.2%;top:48.9%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.22;animation-duration:8.1s;animation-delay:-6.6s;--dust-y:7px} .dc-platform-52518bb8{position:absolute;left:3.4%;top:83.3%;width:4px;height:4px;border-radius:50%;background:#c3fcf1;opacity:0.17;animation-duration:5.3s;animation-delay:-0.1s;--dust-y:6px} .dc-platform-e12a4f6d{position:absolute;left:2.5%;top:47%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.32;animation-duration:7.4s;animation-delay:-0.9s;--dust-y:4px} .dc-platform-fdf30fbf{position:absolute;left:28%;top:4.7%;width:3px;height:3px;border-radius:50%;background:#c3fcf1;opacity:0.23;animation-duration:5.7s;animation-delay:-4.9s;--dust-y:6px} .dc-platform-73d1743e{position:absolute;left:14.3%;top:2.6%;width:2px;height:2px;border-radius:50%;background:#c3fcf1;opacity:0.18;animation-duration:8.1s;animation-delay:-4.0s;--dust-y:4px} .dc-platform-ca7f1ada{max-width:760px;margin:0 auto;position:relative;z-index:1} .dc-platform-4021416d{font-family:Figtree,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#C4622A} .dc-platform-00c98dec{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:40px;line-height:1.18;color:#F8F7F4;margin:18px 0 20px} .dc-platform-d5344c3d{font-family:Figtree,sans-serif;font-size:16.5px;line-height:1.65;color:oklch(80% 0.01 85);margin:0 0 32px} .dc-platform-90165f79{text-decoration:none;font-family:Figtree,sans-serif;font-weight:600;font-size:15px;color:#1C2B2B;background:rgb(229, 228, 223);padding:14px 28px;border-radius:9px;display:inline-block} .dch-platform-a5a3c580:hover{background:#ECE7DC} .dc-platform-c57d4f1c{padding:88px 64px;background:#F8F7F4} .dc-platform-077ae47b{max-width:1320px;margin:0 auto} .dc-platform-9bfe2aa4{text-align:center;max-width:640px;margin:0 auto 48px} .dc-platform-fa63c7f3{font-family:Figtree,sans-serif;font-weight:600;font-size:32px;color:#1C2B2B;margin:0 0 16px} .dc-platform-2c3d18e5{font-family:Figtree,sans-serif;font-size:15px;line-height:1.65;color:oklch(45% 0.012 85);margin:0} .dc-platform-4e1778a0{display:flex;align-items:stretch;background:#fff;border:1px solid oklch(88% 0.008 85);border-radius:16px;padding:8px} .dc-platform-d1d4b9ac{flex:1;border:none;background:transparent;cursor:pointer;padding:12px 0px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:Figtree,sans-serif} .dc-platform-36881d0d{font-size:13.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:#1C2B2B} .dc-platform-7410d8ec { margin-top: 20px; background: #1C2B2B; border-radius: 14px; padding:35px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; min-height: 120px; max-height: 165px; } .dc-platform-e2b01b0d{max-width:640px} .dc-platform-9f1b95af{font-family:Figtree,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#C4622A} .dc-platform-4f141a23{font-family:Figtree,sans-serif;font-size:15.5px;line-height:1.65;color:#F8F7F4;margin:10px 0 0} .dc-platform-a76d597a{display:flex;gap:8px} .dc-platform-9af8b71a{padding:96px 64px;background:#F8F7F4} .dc-platform-1b2a9b2f{max-width:640px;margin:0 0 56px} .dc-platform-f3f49709{font-family:Figtree,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#C4622A} .dc-platform-f9ee55df{font-family:Figtree,sans-serif;font-weight:600;font-size:34px;color:#1C2B2B;margin:16px 0 0} .dc-platform-7ecbcd21{display:flex;flex-direction:column} .dc-platform-fae10e9a{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid oklch(88% 0.008 85);border-radius:16px;overflow:hidden} .dc-platform-27dda922{padding:36px;display:flex;flex-direction:column;gap:12px;justify-content:center} .dc-platform-fa614971{font-family:Figtree,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#C4622A} .dc-platform-00758d33{font-family:Figtree,sans-serif;font-size:22px;font-weight:600;color:#1C2B2B;margin:0} .dc-platform-0688d9ce{font-family:Figtree,sans-serif;font-size:14.5px;line-height:1.65;color:oklch(45% 0.012 85);margin:0} .dc-platform-068d3b35{text-decoration:none;font-family:Figtree,sans-serif;font-size:14px;font-weight:600;color:#1C2B2B;margin-top:8px} .dch-platform-15a7269c:hover{color:#C4622A} .dc-platform-97a50de5{background:#1C2B2B;padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center} .dc-platform-af47f7cd{display:flex;align-items:center;justify-content:space-between;background:oklch(26% 0.014 195);border-radius:9px;padding:11px 14px} .dc-platform-ac8ac620{font-family:Figtree,sans-serif;font-size:13px;color:#F8F7F4} .dc-platform-80088078{font-family:Figtree,sans-serif;font-size:11px;color:oklch(60% 0.012 85)} .dc-platform-9456a548{display:flex;align-items:center;justify-content:space-between;background:oklch(30% 0.03 40);border-radius:9px;padding:11px 14px} .dc-platform-e517845e{font-family:Figtree,sans-serif;font-size:11px;color:#C4622A;font-weight:700} .dc-platform-52f78666{background:rgb(229, 228, 223);padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center;order:1} .dc-platform-36fa295e{font-family:Figtree,sans-serif;font-size:12px;color:oklch(48% 0.012 85);margin-bottom:4px} .dc-platform-8b7a3238{display:flex;align-items:flex-end;gap:6px;height:70px} .dc-platform-4ee3e52f{flex:1;background:oklch(70% 0.012 85);height:40%;border-radius:3px 3px 0 0} .dc-platform-c9d407bc{font-family:Figtree,sans-serif;font-size:12.5px;color:oklch(45% 0.012 85)} .dc-platform-151700a4{padding:36px;display:flex;flex-direction:column;gap:12px;justify-content:center;order:2} .dc-platform-c7397b35{background:#1C2B2B;padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center} .dc-platform-77a21fb1{width:120px;height:120px;border-radius:50%;border:10px solid oklch(32% 0.015 195);position:relative;display:flex;align-items:center;justify-content:center} .dc-platform-76251159{position:absolute;inset:-10px;border-radius:50%;border:10px solid #C4622A;clip-path:polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 30% 100%)} .dc-platform-4d3e5bf9{font-family:Figtree,sans-serif;font-size:22px;font-weight:700;color:#F8F7F4} .dc-platform-16a03683{font-family:Figtree,sans-serif;font-size:12.5px;color:oklch(65% 0.012 85)} .dc-platform-91aaf120{background:rgb(229, 228, 223);padding:28px;display:flex;flex-direction:column;gap:8px;justify-content:center;order:1} .dc-platform-56c54f1e{background:#fff;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} .dc-platform-87d994aa{font-family:Figtree,sans-serif;font-size:12px;color:oklch(48% 0.012 85)} .dc-platform-2de0ec5e{font-family:Figtree,sans-serif;font-size:14.5px;font-weight:600;color:#1C2B2B} .dc-platform-e8c67469{height:5px;background:oklch(90% 0.006 85);border-radius:3px;overflow:hidden;margin-top:4px} .dc-platform-c4b14508{width:60%;height:100%;background:#C4622A} .dc-platform-8bcfb572{text-decoration:none;font-family:Figtree,sans-serif;font-size:14px;font-weight:600;color:#1C2B2B;margin-top:4px} .dch-platform-15a7269c:hover{color:#C4622A} .dc-platform-6bff00c1{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid oklch(32% 0.015 195)} .dc-platform-400a0978{font-family:Figtree,sans-serif;font-size:11.5px;color:oklch(60% 0.012 85)} .dc-platform-3dc5e73a{display:flex;align-items:center;justify-content:space-between;padding:9px 0} .dc-platform-cc5710d7{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .dc-platform-9fc0ac86{font-family:Figtree,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:#2F9E73} .dc-platform-0827c5e3{font-family:Figtree,sans-serif;font-weight:600;font-size:32px;color:#1C2B2B;margin:16px 0 20px} .dc-platform-a438a549{font-family:Figtree,sans-serif;font-size:15px;line-height:1.7;color:oklch(45% 0.012 85);margin:0 0 20px} .dc-platform-9407dc43{font-size:13px!important;color:oklch(50% 0.012 85)!important;margin:0!important;} .dc-platform-690c592d{background:#fff;border:1px solid oklch(88% 0.008 85);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px} .dc-platform-b87ca324{display:flex;align-items:center;gap:10px} .dc-platform-93d7fd52{width:34px;height:34px;border-radius:50%;background:#2F9E73;display:flex;align-items:center;justify-content:center} .dc-platform-badb2b82{font-family:Figtree,sans-serif;font-size:13.5px;font-weight:600;color:#1C2B2B;display:block} .dc-platform-aac7c664{font-family:Figtree,sans-serif;font-size:12px;color:oklch(52% 0.012 85)} .dc-platform-0bee2b8c{background:rgb(229, 228, 223);border-radius:10px;padding:14px;font-family:Figtree,sans-serif;font-size:13px;line-height:1.6;color:oklch(38% 0.012 85)} .dc-platform-3de8f987{display:flex;gap:8px;flex-wrap:wrap} .dc-platform-76e32366{font-size:11.5px;font-weight:600;color:#1C2B2B;background:rgb(229, 228, 223);padding:5px 10px;border-radius:6px;font-family:Figtree,sans-serif} .dc-platform-ca035b8d{padding:80px 64px;background:#1C2B2B} .dc-platform-f25ed1c { text-align: center; width: 60%; margin: 0 auto; } .dc-platform-f25ed1c0{text-align:center;max-width:680px;margin:0 auto 52px} .dc-platform-3582e970{font-family:Figtree,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:#C4622A;display:block;margin-bottom:14px} .dc-platform-237483c3{font-family:Figtree,sans-serif;font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.15;color:#F8F7F4;margin:0 0 16px} .dc-platform-967fca6e{font-family:Figtree,sans-serif;font-size:15px;line-height:1.68;color:rgba(248,247,244,0.6);margin:0} .dc-platform-29fcfed4{display:flex;flex-direction:column;gap:0} .dc-platform-5cac0ff7{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:28px 0;border-top:1px solid rgba(255,255,255,0.08);align-items:start} .dc-platform-fbb726f8{width:44px;height:44px;border-radius:50%;background:#C4622A;display:flex;align-items:center;justify-content:center;font-family:Figtree,sans-serif;font-size:13px;font-weight:700;color:#fff;flex:none} .dc-platform-574c75e0{font-family:Figtree,sans-serif;font-size:11px;color:rgba(248,247,244,0.4);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:4px} .dc-platform-672483f3{font-family:Figtree,sans-serif;font-size:17px;font-weight:600;color:#F8F7F4;margin:0 0 6px} .dc-platform-16a60a92{font-family:Figtree,sans-serif;font-size:14px;line-height:1.7;color:rgba(248,247,244,0.6);margin:0} .dc-platform-e865df56{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-family:Figtree,sans-serif;font-size:13px;font-weight:700;color:#F8F7F4;flex:none} .dc-platform-f617b5c6{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:28px 0;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);align-items:start} .dc-platform-e9048704{width:44px;height:44px;border-radius:50%;background:#2F9E73;display:flex;align-items:center;justify-content:center;font-family:Figtree,sans-serif;font-size:13px;font-weight:700;color:#fff;flex:none} .dc-platform-310ce26f{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px} .dc-platform-bdb2e733{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:24px} .dc-platform-2803a681{font-family:Figtree,sans-serif;font-size:11px;font-weight:600;color:rgba(248,247,244,0.4);text-transform:uppercase;letter-spacing:0.05em;display:block;margin-bottom:10px} .dc-platform-310bdeaa{font-family:Figtree,sans-serif;font-size:16px;font-weight:600;color:#F8F7F4;margin:0 0 8px} .dc-platform-68cf4fe9{font-family:Figtree,sans-serif;font-size:13.5px;line-height:1.65;color:rgba(248,247,244,0.55);margin:0} .dc-platform-6e7a11a1{padding:80px 64px;background:rgb(229, 228, 223)} .dc-platform-3ae00f71{max-width:680px;margin:0 0 48px} .dc-platform-d1cd5ff3{font-family:Figtree,sans-serif;font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1.15;color:#1C2B2B;margin:0 0 16px} .dc-platform-e14f71dd{font-family:Figtree,sans-serif;font-size:15px;line-height:1.7;color:oklch(45% 0.012 85);margin:0} .dc-platform-245fd52{margin-bottom:55px;} .dc-platform-245fd52b{display:flex;align-items:center;gap:8px;margin-bottom:40px;flex-wrap:wrap;font-family:Figtree,sans-serif;font-size:13px} .dc-platform-87ffb752{background:#1C2B2B;color:#F8F7F4;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;} .dc-platform-9805b3cf{color:oklch(55% 0.012 85)} .dc-platform-f22e0e67{display:flex;flex-direction:column;gap:20px} .dc-platform-14f1d362{border:1px solid oklch(88% 0.008 85);background:#fff;border-radius:16px;overflow:hidden} .dc-platform-ed35adaa{display:grid;grid-template-columns:1fr 1fr;min-height:200px} .dc-platform-5d1d4eba{padding:32px;display:flex;flex-direction:column;gap:10px;justify-content:center} .dc-platform-c2d21276{font-family:Figtree,sans-serif;font-size:11px;font-weight:700;background:oklch(92% 0.006 85);color:oklch(40% 0.012 85);padding:4px 10px;border-radius:6px;display:inline-block;width:fit-content} .dc-platform-df14243e{font-family:Figtree,sans-serif;font-size:20px;font-weight:600;color:#1C2B2B;margin:0} .dc-platform-abb102d7{font-family:Figtree,sans-serif;font-size:14px;line-height:1.7;color:oklch(42% 0.012 85);margin:0} .dc-platform-57618d73{display:flex;flex-direction:column;gap:6px;font-family:Figtree,sans-serif;font-size:12.5px;color:oklch(45% 0.012 85)} .dc-platform-7b041865{color:#1C2B2B} .dc-platform-b0427fe6{font-family:Figtree,sans-serif;font-size:13px;font-weight:600;color:#C4622A;text-decoration:none;margin-top:4px} .dc-platform-674cdc1d{background:#1C2B2B;padding:28px;display:flex;flex-direction:column;gap:8px;justify-content:center} .dc-platform-e2fd0e7c{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.06);border-radius:8px;padding:10px 14px} .dc-platform-7e9f99fc{font-family:Figtree,sans-serif;font-size:11px;color:rgba(248,247,244,0.45)} .dc-platform-9c5ba250{display:flex;align-items:center;justify-content:space-between;background:rgba(196,98,42,0.15);border:1px solid rgba(196,98,42,0.3);border-radius:8px;padding:10px 14px} .dc-platform-98f7dbce{background:rgb(248, 247, 244);padding:28px;display:flex;flex-direction:column;gap:8px;justify-content:center} .dc-platform-2dabd078{background:#fff;border-radius:10px;padding:14px 16px} .dc-platform-a4a66396{font-family:Figtree,sans-serif;font-size:11px;color:oklch(50% 0.012 85);display:block;margin-bottom:4px} .dc-platform-c0713efa{height:4px;background:oklch(90% 0.006 85);border-radius:2px;overflow:hidden} .dc-platform-6157e890{display:flex;gap:6px;flex-wrap:wrap} .dc-platform-3843e064{font-family:Figtree,sans-serif;font-size:11px;background:rgb(229, 228, 223);padding:3px 8px;border-radius:4px;color:#1C2B2B} .dc-platform-73e05c30{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:rgba(255,255,255,0.06);border-radius:8px} .dc-platform-123e8a23{font-family:Figtree,sans-serif;font-size:12.5px;color:#F8F7F4} .dc-platform-b109775f{font-family:Figtree,sans-serif;font-size:11.5px;color:#2F9E73;font-weight:600} .dc-platform-d4d78f6b{font-family:Figtree,sans-serif;font-size:11.5px;color:#C4622A;font-weight:600} .dc-platform-14b4b58a{display:flex;flex-direction:column;gap:6px} .dc-platform-bb87c890{display:flex;justify-content:space-between;font-family:Figtree,sans-serif;font-size:12.5px;color:oklch(42% 0.012 85);padding:8px 0;border-bottom:1px solid oklch(90% 0.006 85)} .dc-platform-94c878be{color:#2F9E73} .dc-platform-91d7e512{display:flex;justify-content:space-between;font-family:Figtree,sans-serif;font-size:12.5px;color:oklch(42% 0.012 85);padding:8px 0} .dc-platform-15a7269c{color:#C4622A} .dc-platform-af795dd6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px} .dc-platform-5b4212fa{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:22px} .dc-platform-dbc09969{font-family:Figtree,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:rgba(248,247,244,0.4);margin-bottom:14px} .dc-platform-259279ae{font-family:Figtree,sans-serif;font-size:13px;color:rgba(248,247,244,0.6);padding:6px 10px;background:rgba(255,255,255,0.05);border-radius:6px} .dc-platform-8df2cd42{background:rgba(47,158,115,0.08);border:1px solid rgba(47,158,115,0.2);border-radius:14px;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px} .dc-platform-5b89f6c9{overflow:visible} .dc-platform-fb41276b{font-family:Figtree,sans-serif;font-size:13px;font-weight:600;color:#F8F7F4;margin:0 0 3px} .dc-platform-ba5ba399{font-family:Figtree,sans-serif;font-size:11.5px;color:rgba(248,247,244,0.5);margin:0} .dc-platform-7726fb9c{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .dc-platform-0563a01e{padding:20px;border:1px solid rgba(255,255,255,0.08);border-radius:12px} .dc-platform-a2f39f5f{font-family:Figtree,sans-serif;font-size:15px;font-weight:600;color:#F8F7F4;margin:0 0 6px} .dc-platform-e16110c1{font-family:Figtree,sans-serif;font-size:15px;line-height:1.6;color:rgba(248,247,244,0.55);margin:0} .dc-platform-d9633aad{font-family:Figtree,sans-serif;font-size:15px;line-height:1.68;color:oklch(45% 0.012 85);margin:0} .dc-platform-e0f896ba{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .dc-platform-64cafd6e{background:#fff;border:1px solid oklch(88% 0.008 85);border-radius:16px;padding:26px} .dc-platform-c8e88634{font-family:Figtree,sans-serif;font-size:11px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#C4622A;display:block;margin-bottom:10px} .dc-platform-37a7ca89{font-family:Figtree,sans-serif;font-size:16px;font-weight:600;color:#1C2B2B;margin:0 0 8px} .dc-platform-958e00a8{font-family:Figtree,sans-serif;font-size:14px;line-height:1.6;color:oklch(42% 0.012 85);margin:0 0 12px} .dc-platform-b16070b1{font-family:Figtree,sans-serif;font-size:12.5px;line-height:1.8;color:oklch(45% 0.012 85);margin:0;padding-left:16px} .dc-platform-8aaaf0ae{padding:110px 64px;background:#1C2B2B;text-align:center} .dc-platform-64479dc0{max-width:680px;margin:0 auto} .dc-platform-ca09ef8b{font-family:Figtree,sans-serif;font-weight:600;font-size:36px;line-height:1.3;color:#F8F7F4;margin:0 0 20px} .dc-platform-1d9e7d8c{text-decoration:none;font-family:Figtree,sans-serif;font-weight:600;font-size:15px;color:#1C2B2B;background:rgb(248, 247, 244);padding:15px 30px;border-radius:9px;display:inline-block} .dch-platform-a5a3c580:hover{background:#ECE7DC} /* Lifecycle content becomes the positioning parent */ .dc-platform-7410d8ec { position: relative; } /* Lifecycle pagination dots */ .platform-lifecycle-dots { display: flex; align-items: center; justify-content: center; gap: 12px; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; } .platform-lifecycle-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); display: block; transition: background-color 0.25s ease, transform 0.25s ease; } .platform-lifecycle-dot.is-active { background: #C4622A; transform: scale(1.05); } . /* Mobile */ @media (max-width: 700px) { /* Lifecycle content card */ .dc-platform-7410d8ec { position: relative !important; /* Give the dots their own bottom space */ padding-bottom: 42px !important; } /* Mobile pagination dots */ .platform-lifecycle-dots { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 14px !important; top: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; z-index: 5 !important; } .platform-lifecycle-dot { width: 7px !important; height: 7px !important; flex: 0 0 7px !important; } } .life-row button[data-lifecycle] { border: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; } .life-row button[data-lifecycle].is-active { background: rgb(196, 98, 42); color: #fff !important; } .life-row button[data-lifecycle].is-active span { color: #fff !important; } .life-row button[data-lifecycle].is-active svg * { stroke: #fff !important; } /* INTRUNO FINAL PAGE-ONLY RESPONSIVE OVERRIDES */ /* The site chrome is intentionally untouched. These rules apply only to page content. */ main.intruno-page { width: 100%; max-width: 100%; overflow-x: clip; } main.intruno-page > section { padding-left: 30px !important; padding-right: 30px !important; } main.intruno-page .intruno-container, main.intruno-page .intruno-container-wide, main.intruno-page .inv-container, main.intruno-page .resources-cert-inner, main.intruno-page .resources-featured-inner, main.intruno-page .resources-hero-grid { width: 90%; max-width: 1320px; margin-left: auto; margin-right: auto; } main.intruno-page .hero-grid, main.intruno-page .hero-cols, main.intruno-page .grid-2, main.intruno-page .grid-3, main.intruno-page .grid-6, main.intruno-page .two-col { min-width: 0; } main.intruno-page img, main.intruno-page svg, main.intruno-page video, main.intruno-page iframe { max-width: 100%; } main.intruno-page .card, main.intruno-page .bevel-card, main.intruno-page .inv-walkthrough-card, main.intruno-page .resources-cert-card { box-sizing: border-box; } main.intruno-page input, main.intruno-page select, main.intruno-page textarea { max-width: 100%; } @media (max-width: 1024px) { main.intruno-page > section { padding-left: 24px !important; padding-right: 24px !important; } main.intruno-page .hero-grid, main.intruno-page .hero-cols { grid-template-columns: minmax(0, 1fr) !important; } main.intruno-page .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } main.intruno-page .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } main.intruno-page .grid-2 { min-width: 0; } } @media (max-width: 700px) { .dc-platform-7410d8ec { text-align: center !important; padding: 9px !important; align-items: baseline !important; gap: 0 !important; min-height:180px!important; } .platform-lifecycle-dot{ width:7px!important; height:7px!important; } .dc-platform-d1d4b9ac{ padding:5px 15px!important; } main.intruno-page > section { padding-left: 20px !important; padding-right: 20px !important; } main.intruno-page .intruno-container, main.intruno-page .intruno-container-wide, main.intruno-page .inv-container, main.intruno-page .resources-cert-inner, main.intruno-page .resources-featured-inner, main.intruno-page .resources-hero-grid { width: 92%; } main.intruno-page .grid-2, main.intruno-page .grid-3, main.intruno-page .grid-6, main.intruno-page .two-col { grid-template-columns: minmax(0, 1fr) !important; } main.intruno-page .life-row, main.intruno-page .stage-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } main.intruno-page .life-row::-webkit-scrollbar, main.intruno-page .stage-row::-webkit-scrollbar { display: none; } main.intruno-page .side-rail { display: none !important; } main.intruno-page .inv-walkthrough-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; } main.intruno-page .inv-walkthrough-tab { flex: 0 0 auto; } } @media (max-width: 420px) { main.intruno-page > section { padding-left: 16px !important; padding-right: 16px !important; } main.intruno-page .intruno-container, main.intruno-page .intruno-container-wide, main.intruno-page .inv-container, main.intruno-page .resources-cert-inner, main.intruno-page .resources-featured-inner, main.intruno-page .resources-hero-grid { width: 94%; } } /* ========================================================= PLATFORM — LIFECYCLE NAVIGATION Mobile: 2-column grid instead of horizontal scrolling ========================================================= */ @media (max-width: 700px) { main.intruno-page .life-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; overflow-x: visible !important; gap: 1px !important; box-sizing: border-box; } /* Each lifecycle stage */ main.intruno-page .life-row > * { width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; box-sizing: border-box; min-height: 90px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* Icon */ main.intruno-page .life-row > * svg { flex: 0 0 auto; margin-bottom: 7px; } /* Stage label */ main.intruno-page .life-row > * span, main.intruno-page .life-row > * .label { text-align: center !important; white-space: normal !important; } /* Module navigation wrapper */ main.intruno-page .dc-platform-245fd52 { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; overflow: visible !important; box-sizing: border-box; } /* Individual module links */ main.intruno-page .dc-platform-245fd52 .dc-platform-87ffb752 { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 48px; padding: 12px 16px !important; margin: 0 !important; box-sizing: border-box; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere; border-radius: 10px !important; } main.intruno-page .dc-platform-245fd52 { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; gap: 0 !important; overflow: visible !important; } main.intruno-page .dc-platform-245fd52 .dc-platform-87ffb752 { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; min-height: 48px; padding: 12px 16px !important; box-sizing: border-box; text-align: center !important; white-space: normal !important; border-radius: 10px !important; } .dc-platform-245fd52 { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 0 !important; } .dc-platform-245fd52 > .dc-platform-87ffb752 { width: 100% !important; box-sizing: border-box; text-align: center !important; } .dc-platform-245fd52 > .dc-platform-9805b3cf { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 28px !important; margin: 0 !important; padding: 0 !important; transform: rotate(90deg) !important; box-sizing: border-box; } } /* ========================================================= INTRUNO PLATFORM — CAPABILITIES DC TEMPLATE MATCH ========================================================= */ main.intruno-page #sec-capabilities { padding: 96px 64px; background: #E5E4DF; } main.intruno-page #sec-capabilities > .inner-section { max-width: 1320px; margin: 0 auto; } main.intruno-page #sec-capabilities .dc-platform-1b2a9b2f { max-width: 640px; margin: 0 0 56px; } main.intruno-page #sec-capabilities .dc-platform-f3f49709 { font-family: Figtree, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #C4622A; } main.intruno-page #sec-capabilities .dc-platform-f9ee55df { font-family: Figtree, sans-serif; font-weight: 600; font-size: 34px; line-height: 1.2; color: #1C2B2B; margin: 16px 0 0; } /* ========================================================= INTRUNO — CAPABILITIES DC STYLE STACK Each capability remains one card. The complete card sticks, while later cards stack over it. ========================================================= */ main.intruno-page #sec-capabilities .cap-stack { position: relative !important; display: flex !important; flex-direction: column !important; gap: 20px !important; padding-bottom: 48px !important; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-stack > .grid-2 { position: sticky !important; width: 100% !important; height: 580px !important; min-height: 580px !important; display: flex !important; flex-direction: column !important; background: #fff !important; border-radius: 18px !important; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 -4px 20px rgba(28, 43, 43, 0.10) !important; border-top: 3px solid #2F9E73 !important; } /* --------------------------------------------------------- STICKY POSITIONS --------------------------------------------------------- */ /* 01 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(1) { top: 22px !important; z-index: 1 !important; } /* 02 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(2) { top: 94px !important; z-index: 2 !important; } /* 03 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(3) { top: 166px !important; z-index: 3 !important; border-top-color: #C4622A !important; } /* 04 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(4) { top: 238px !important; z-index: 4 !important; } /* 05 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(5) { top: 310px !important; z-index: 5 !important; border-top-color: #C4622A !important; } /* 06 */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(6) { top: 382px !important; z-index: 6 !important; } /* --------------------------------------------------------- HEADER --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-head { flex: 0 0 72px !important; width: 100% !important; height: 72px !important; min-height: 72px !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 0 36px !important; background: #fff !important; border-bottom: 1px solid oklch(93% 0.006 85) !important; box-sizing: border-box !important; white-space: nowrap !important; /* DO NOT make header independently sticky */ position: relative !important; z-index: 2 !important; } /* --------------------------------------------------------- BODY --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-body { flex: 1 1 auto !important; width: 100% !important; min-height: 508px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; box-sizing: border-box !important; position: relative !important; z-index: 1 !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 900px) { main.intruno-page #sec-capabilities .cap-stack > .grid-2 { position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; margin-bottom: 20px !important; box-shadow: none !important; border-radius: 18px !important; } main.intruno-page #sec-capabilities .cap-head { position: relative !important; height: 48px !important; min-height: 48px !important; flex: 0 0 48px !important; padding: 0 24px !important; } main.intruno-page #sec-capabilities .cap-body { grid-template-columns: 1fr !important; min-height: 0 !important; } } /* --------------------------------------------------------- CAPABILITY HEADER --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-head { flex: 0 0 48px; width: 100%; height: 48px; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: #ffffff; border-bottom: 1px solid oklch(93% 0.006 85); box-sizing: border-box; white-space: nowrap; } main.intruno-page #sec-capabilities .cap-number { font-family: Figtree, sans-serif; font-size: 11px; font-weight: 600; color: oklch(62% 0.012 85); letter-spacing: 0.04em; } main.intruno-page #sec-capabilities .cap-title { font-family: Figtree, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #C4622A; } /* --------------------------------------------------------- CAPABILITY BODY / CONTENT --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-body { flex: 1 1 auto; width: 100%; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; box-sizing: border-box; } main.intruno-page #sec-capabilities .cap-content { padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; box-sizing: border-box; } main.intruno-page #sec-capabilities .cap-content h3 { margin: 0; font-family: Figtree, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.25; color: #1C2B2B; } main.intruno-page #sec-capabilities .cap-content p { margin: 0; font-family: Figtree, sans-serif; font-size: 14.5px; line-height: 1.65; color: oklch(45% 0.012 85); } main.intruno-page #sec-capabilities .cap-content a { margin-top: 4px; font-family: Figtree, sans-serif; font-size: 14px; font-weight: 600; color: #1C2B2B; text-decoration: none; transition: color 0.2s ease; } main.intruno-page #sec-capabilities .cap-content a:hover { color: #C4622A !important; } main.intruno-page #sec-capabilities .cap-content-pattern { order: 2; } main.intruno-page #sec-capabilities .cap-content-pattern h3, main.intruno-page #sec-capabilities .cap-content-pattern p { margin-left: 0; } /* --------------------------------------------------------- VISUAL SIDE --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-visual { min-width: 0; min-height: 0; box-sizing: border-box; } main.intruno-page #sec-capabilities .cap-visual-bg-dark { background: #1C2B2B !important; } main.intruno-page #sec-capabilities .cap-visual-light { background: #F8F7F4; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } main.intruno-page #sec-capabilities .cap-visual-dark { background: #1C2B2B; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; } /* ========================================================= CAPABILITIES — LAPTOP / DASHBOARD Same laptop treatment as the Modules section ========================================================= */ main.intruno-page #sec-capabilities .cap-content { position: relative; z-index: 3; } /* --------------------------------------------------------- LAPTOP WRAPPER --------------------------------------------------------- */ main.intruno-page #sec-capabilities .lap { position: relative !important; padding-bottom: 20px !important; box-sizing: border-box !important; z-index: 5 !important; } /* --------------------------------------------------------- LAPTOP SCREEN / FRAME --------------------------------------------------------- */ main.intruno-page #sec-capabilities .lap-screen { position: relative !important; width: 95% !important; padding: 8px !important; background: #1C2B2B !important; border-radius: 15px 15px 5px 5px !important; box-sizing: border-box !important; box-shadow: 0 14px 28px rgba(28,43,43,.16) !important; z-index: 1 !important; } /* Actual screenshot */ main.intruno-page #sec-capabilities .lap-screen img { display: block !important; width: 100% !important; height: auto !important; max-width: none !important; margin: 0 !important; border-radius: 4px !important; box-sizing: border-box !important; } /* --------------------------------------------------------- LAPTOP BOTTOM / BASE --------------------------------------------------------- */ main.intruno-page #sec-capabilities .lap-base { position: absolute !important; left: 43% !important; bottom: 0 !important; width: 14% !important; height: 4px !important; background: #263838 !important; border-radius: 0 0 4px 4px !important; z-index: 4 !important; } main.intruno-page #sec-capabilities .lap-base span { display: block !important; width: 45% !important; height: 3px !important; margin: 0 auto !important; background: rgba(255,255,255,.18) !important; border-radius: 0 0 3px 3px !important; } /* Laptop lower lip */ main.intruno-page #sec-capabilities .lap-screen::after { content: "" !important; position: absolute !important; left: -7% !important; right: -7% !important; bottom: -18px !important; height: 18px !important; background: #1C2B2B !important; border-radius: 0 0 12px 12px !important; z-index: 2 !important; } /* --------------------------------------------------------- ZOOMED CALLOUT --------------------------------------------------------- */ main.intruno-page #sec-capabilities .lap-callout { position: absolute !important; width: 88% !important; aspect-ratio: 475 / 200 !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid rgba(28,43,43,.12) !important; border-radius: 13px !important; box-shadow: 0 18px 38px rgba(28,43,43,.24) !important; z-index: 10 !important; } main.intruno-page #sec-capabilities .cap-1 .lap-callout, main.intruno-page #sec-capabilities .cap-3 .lap-callout, main.intruno-page #sec-capabilities .cap-5 .lap-callout { left: 46% !important; top: 46% !important; } main.intruno-page #sec-capabilities .cap-2 .lap-callout, main.intruno-page #sec-capabilities .cap-4 .lap-callout { right: 52%!important; top: 41% !important; } main.intruno-page #sec-capabilities .cap-3 .lap-callout img{ left: -25.26%!important; top: -131%!important; } main.intruno-page #sec-capabilities .cap-4 .lap-callout img{ left: -0.42%!important; top: -52.5%!important; } main.intruno-page #sec-capabilities .cap-5 .lap-callout img{ left: -118.95%!important; top: -200%!important; } main.intruno-page #sec-capabilities .cap-2 .lap-callout img{ left: -8% !important; top: -64% !important; } /* * Zoom the duplicate image inside the callout. * The callout therefore shows a specific cropped * area of dashboard.jpg rather than the whole image. */ main.intruno-page #sec-capabilities .lap-callout img { position: absolute !important; width: 378% !important; max-width: none !important; height: auto !important; left: -30%; top: -53%; display: block !important; margin: 0 !important; } /* --------------------------------------------------------- DEMO NOTE --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-demo-note { display: block !important; margin-top: 22px !important; font-family: Figtree, sans-serif !important; font-size: 12px !important; line-height: 1.4 !important; color: oklch(52% 0.012 85) !important; } /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media (min-width: 901px) { main.intruno-page #sec-capabilities .lap { width: 78% !important; margin-top: 38px !important; margin-left: 30px; } .cap-2 .lap, .cap-4 .lap{ margin-left: auto !important; } } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 900px) { main.intruno-page #sec-capabilities .lap { width: 82% !important; margin-left: 20px !important; } main.intruno-page #sec-capabilities .lap-callout { left: 32% !important; top: 50% !important; width: 58% !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 700px) { main.intruno-page #sec-capabilities .lap { width: 88% !important; margin: 34px auto 0 !important; } main.intruno-page #sec-capabilities .lap-screen { padding: 6px !important; border-radius: 10px 10px 3px 3px !important; } main.intruno-page #sec-capabilities .lap-screen::after { left: -5% !important; right: -5% !important; bottom: -10px !important; height: 10px !important; border-radius: 0 0 8px 8px !important; } main.intruno-page #sec-capabilities .lap-callout { position: relative !important; left: auto !important; top: auto !important; width: 72% !important; margin-top: -30px !important; margin-left: auto !important; margin-right: 0 !important; aspect-ratio: 475 / 200 !important; } main.intruno-page #sec-capabilities .lap-callout img { width: 500% !important; left: -4% !important; top: -29% !important; } } /* --------------------------------------------------------- CAPABILITY 01 MONITORING ROWS --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; background: oklch(26% 0.014 195); border-radius: 9px; } main.intruno-page #sec-capabilities .cap-row-special { background: oklch(30% 0.03 40); } main.intruno-page #sec-capabilities .cap-row-label { font-family: Figtree, sans-serif; font-size: 13px; color: #F8F7F4; } main.intruno-page #sec-capabilities .cap-status { font-family: Figtree, sans-serif; font-size: 11px; color: oklch(60% 0.012 85); white-space: nowrap; } main.intruno-page #sec-capabilities .cap-row-special .cap-status { color: #C4622A; font-weight: 700; } /* --------------------------------------------------------- DEMO LABEL --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-demo-note { display: block; font-family: Figtree, sans-serif; font-size: 11.5px; color: oklch(45% 0.012 85); } main.intruno-page #sec-capabilities .cap-demo-note-right { align-self: flex-end; } /* --------------------------------------------------------- CAPABILITY 02 — BEHAVIORAL INTELLIGENCE --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-visual-pattern { background: #F8F7F4; padding: 28px; display: flex; flex-direction: column; justify-content: center; gap: 10px; box-sizing: border-box; order: 1; } main.intruno-page #sec-capabilities .cap-pattern-label { display: block; margin-bottom: 4px; font-family: Figtree, sans-serif; font-size: 12px; color: oklch(48% 0.012 85); } main.intruno-page #sec-capabilities .cap-pattern-bars { width: 100%; height: 70px; display: flex; align-items: flex-end; gap: 6px; box-sizing: border-box; } main.intruno-page #sec-capabilities .cap-bar { flex: 1 1 0; min-width: 0; display: block; border-radius: 3px 3px 0 0; background: oklch(70% 0.012 85); } main.intruno-page #sec-capabilities .cap-bar-01 { height: 40%; } main.intruno-page #sec-capabilities .cap-bar-02 { height: 55%; } main.intruno-page #sec-capabilities .cap-bar-03 { height: 38%; } main.intruno-page #sec-capabilities .cap-bar-04 { height: 62%; } main.intruno-page #sec-capabilities .cap-bar-05 { height: 45%; } main.intruno-page #sec-capabilities .cap-bar-06 { height: 70%; } main.intruno-page #sec-capabilities .cap-bar-07 { height: 50%; } main.intruno-page #sec-capabilities .cap-bar-08 { height: 65%; } main.intruno-page #sec-capabilities .cap-bar-09 { height: 58%; } main.intruno-page #sec-capabilities .cap-bar-10 { height: 80%; } main.intruno-page #sec-capabilities .cap-bar-11 { height: 62%; } main.intruno-page #sec-capabilities .cap-bar-12 { height: 75%; } main.intruno-page #sec-capabilities .cap-bar-13 { height: 68%; } main.intruno-page #sec-capabilities .cap-bar-14 { height: 88%; } main.intruno-page #sec-capabilities .cap-bar-10, main.intruno-page #sec-capabilities .cap-bar-12, main.intruno-page #sec-capabilities .cap-bar-14 { background: #C4622A; } main.intruno-page #sec-capabilities .cap-pattern-note { display: block; font-family: Figtree, sans-serif; font-size: 12.5px; color: oklch(45% 0.012 85); } /* --------------------------------------------------------- CAPABILITY 03 — RISK DETECTION --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-alert-count { width: 120px; height: 120px; margin: 0 auto; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 10px solid oklch(32% 0.015 195); box-sizing: border-box; } main.intruno-page #sec-capabilities .cap-alert-count::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 10px solid #C4622A; clip-path: polygon( 50% 50%, 50% 0%, 100% 0%, 100% 100%, 30% 100% ); } main.intruno-page #sec-capabilities .cap-alert-number { position: relative; z-index: 1; font-family: Figtree, sans-serif; font-size: 22px; font-weight: 700; color: #F8F7F4; } main.intruno-page #sec-capabilities .cap-alert-label { font-family: Figtree, sans-serif; font-size: 12.5px; color: oklch(65% 0.012 85); text-align: center; } /* --------------------------------------------------------- CAPABILITY 04 — INVESTIGATION --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-case { background: #ffffff; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } main.intruno-page #sec-capabilities .cap-case-label { font-family: Figtree, sans-serif; font-size: 12px; color: oklch(48% 0.012 85); } main.intruno-page #sec-capabilities .cap-case-status { font-family: Figtree, sans-serif; font-size: 14.5px; font-weight: 600; color: #1C2B2B; } main.intruno-page #sec-capabilities .cap-progress { width: 100%; height: 5px; margin-top: 4px; background: oklch(90% 0.006 85); border-radius: 3px; overflow: hidden; } main.intruno-page #sec-capabilities .cap-progress span { display: block; width: 60%; height: 100%; background: #C4622A; } /* --------------------------------------------------------- CAPABILITY 05 — COMPLIANCE & REPORTING --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-report-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid oklch(32% 0.015 195); } main.intruno-page #sec-capabilities .cap-report-row:last-child { border-bottom: 0; } main.intruno-page #sec-capabilities .cap-report-name { font-family: Figtree, sans-serif; font-size: 13px; color: #F8F7F4; } main.intruno-page #sec-capabilities .cap-report-status { font-family: Figtree, sans-serif; font-size: 11.5px; color: oklch(60% 0.012 85); } /* --------------------------------------------------------- CAPABILITY 06 — HOTLINE NATE --------------------------------------------------------- */ main.intruno-page #sec-capabilities .cap-nate-heading { display: flex; align-items: center; gap: 10px; } main.intruno-page #sec-capabilities .cap-nate-icon { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2F9E73; } main.intruno-page #sec-capabilities .cap-nate-icon svg { width: 14px; height: 14px; } main.intruno-page #sec-capabilities .cap-nate-title { display: block; font-family: Figtree, sans-serif; font-size: 13px; font-weight: 600; color: #1C2B2B; } main.intruno-page #sec-capabilities .cap-nate-subtitle { display: block; margin-top: 2px; font-family: Figtree, sans-serif; font-size: 11.5px; color: oklch(52% 0.012 85); } main.intruno-page #sec-capabilities .cap-transcript { background: #ffffff; border-radius: 10px; padding: 12px 14px; font-family: Figtree, sans-serif; font-size: 12.5px; line-height: 1.6; color: oklch(38% 0.012 85); } main.intruno-page #sec-capabilities .cap-tags { display: flex; flex-wrap: wrap; gap: 6px; } main.intruno-page #sec-capabilities .cap-tag { padding: 5px 10px; border-radius: 6px; background: #ffffff; font-family: Figtree, sans-serif; font-size: 11px; font-weight: 600; color: #1C2B2B; } /* --------------------------------------------------------- CAPABILITY 06 DISCLAIMER / CTA --------------------------------------------------------- */ main.intruno-page #sec-capabilities .dc-platform-9407dc43 { margin-top: 0; } main.intruno-page #sec-capabilities .demo-btn { display: inline-block; } /* --------------------------------------------------------- TABLET / MOBILE --------------------------------------------------------- */ @media (max-width: 900px) { main.intruno-page #sec-capabilities { padding: 72px 32px; } main.intruno-page #sec-capabilities .cap-stack > .grid-2 { position: static !important; width: 100%; height: auto !important; min-height: 0; margin-bottom: 20px; box-shadow: none; border-radius: 18px; } main.intruno-page #sec-capabilities .cap-body { grid-template-columns: 1fr; } main.intruno-page #sec-capabilities .cap-head { height: 48px; min-height: 48px; } main.intruno-page #sec-capabilities .cap-content { padding: 28px 24px; } main.intruno-page #sec-capabilities .cap-visual, main.intruno-page #sec-capabilities .cap-visual-light, main.intruno-page #sec-capabilities .cap-visual-dark { min-height: 220px; } main.intruno-page #sec-capabilities .lap { max-width: 440px; } } @media (max-width: 600px) { main.intruno-page #sec-capabilities { padding: 60px 20px; } main.intruno-page #sec-capabilities .cap-stack { gap: 16px; padding-bottom: 20px; } main.intruno-page #sec-capabilities .cap-head { padding: 0 18px; gap: 10px; } main.intruno-page #sec-capabilities .cap-title { font-size: 10.5px; } main.intruno-page #sec-capabilities .cap-content { padding: 24px 20px; } main.intruno-page #sec-capabilities .cap-content h3 { font-size: 20px; } main.intruno-page #sec-capabilities .cap-visual, main.intruno-page #sec-capabilities .cap-visual-light, main.intruno-page #sec-capabilities .cap-visual-dark { padding: 22px 20px; min-height: 200px; } main.intruno-page #sec-capabilities .lap { max-width: 100%; padding-right: 28px; } main.intruno-page #sec-capabilities .lap-left { padding-left: 28px; padding-right: 0; } main.intruno-page #sec-capabilities .lap-callout { width: min(300px, 85%); } main.intruno-page #sec-capabilities .lap:not(.lap-left) .lap-callout { right: -20px; } main.intruno-page #sec-capabilities .lap-left .lap-callout { left: -20px; } } /* ========================================================= PLATFORM MODULES — PRODUCT IMAGES Reuses the same 2026/08 assets shown in Capabilities. ========================================================= */ main.intruno-page #sec-modules .module-visual-image { position: relative; overflow: hidden; } main.intruno-page #sec-modules .module-product-image { display: block; width: 100%; max-width: 100% !important; height: auto; margin: 0 0 22px; border-radius: 12px; background: #ffffff; box-shadow: 0 12px 30px rgba(28, 43, 43, 0.12); object-fit: cover; } /* Keep the existing module UI readable beneath the image. */ main.intruno-page #sec-modules .module-visual-image > .dc-platform-e2fd0e7c, main.intruno-page #sec-modules .module-visual-image > .dc-platform-9c5ba250, main.intruno-page #sec-modules .module-visual-image > .dc-platform-2dabd078, main.intruno-page #sec-modules .module-visual-image > .dc-platform-73e05c30, main.intruno-page #sec-modules .module-visual-image > .dc-platform-14b4b58a { position: relative; z-index: 1; } @media (max-width: 900px) { main.intruno-page #sec-modules .module-product-image { margin-bottom: 18px; border-radius: 10px; } } @media (max-width: 600px) { main.intruno-page #sec-modules .module-product-image { margin-bottom: 16px; border-radius: 8px; } } /* Keep the accent borders without the old sticky z-index stack. */ main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(3), main.intruno-page #sec-capabilities .cap-stack > .grid-2:nth-child(5) { border-top-color: #C4622A !important; } /* ========================================================= PLATFORM MODULES — EXPLICIT IMAGE SIDES Preserve the original DC template alternating layout. Module 01: image RIGHT Module 02: image LEFT Module 03: image RIGHT Module 04: image LEFT ========================================================= */ /* Module 01 — TEXT LEFT / IMAGE RIGHT */ main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(1) > .dc-platform-ed35adaa > .dc-platform-5d1d4eba { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(1) > .dc-platform-ed35adaa > .dc-platform-674cdc1d { grid-column: 2 !important; grid-row: 1 !important; } /* Module 02 — IMAGE LEFT / TEXT RIGHT */ main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(2) > .dc-platform-ed35adaa > .dc-platform-98f7dbce { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(2) > .dc-platform-ed35adaa > .dc-platform-5d1d4eba { grid-column: 2 !important; grid-row: 1 !important; } /* Module 03 — TEXT LEFT / IMAGE RIGHT */ main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(3) > .dc-platform-ed35adaa > .dc-platform-5d1d4eba { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(3) > .dc-platform-ed35adaa > .dc-platform-674cdc1d { grid-column: 2 !important; grid-row: 1 !important; } /* Module 04 — IMAGE LEFT / TEXT RIGHT */ main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(4) > .dc-platform-ed35adaa > .dc-platform-98f7dbce { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(4) > .dc-platform-ed35adaa > .dc-platform-5d1d4eba { grid-column: 2 !important; grid-row: 1 !important; } /* Keep the product screenshot inside its intended visual column. */ main.intruno-page #sec-modules .module-visual-image { box-sizing: border-box !important; min-width: 0 !important; } main.intruno-page #sec-modules .module-product-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 22px !important; box-sizing: border-box !important; } /* Mobile: return to one column and keep each module readable. */ @media (max-width: 900px) { main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362 > .dc-platform-ed35adaa { display: flex !important; flex-direction: column !important; } main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(1) > .dc-platform-ed35adaa > *, main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(2) > .dc-platform-ed35adaa > *, main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(3) > .dc-platform-ed35adaa > *, main.intruno-page #sec-modules .dc-platform-f22e0e67 > .dc-platform-14f1d362:nth-child(4) > .dc-platform-ed35adaa > * { grid-column: auto !important; grid-row: auto !important; } } /* ========================================================= FINAL MODULE LAYOUT — MATCH THE DC TEMPLATE The product screenshot belongs INSIDE the existing visual column. It must never become part of the text column. 01: text LEFT / visual + image RIGHT 02: visual + image LEFT / text RIGHT 03: text LEFT / visual + image RIGHT 04: visual + image LEFT / text RIGHT ========================================================= */ main.intruno-page #sec-modules .platform-module-01 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-02 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-03 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-04 > .dc-platform-ed35adaa { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; direction: ltr !important; } /* MODULE 01 — visual/image RIGHT */ main.intruno-page #sec-modules .platform-module-01 .dc-platform-5d1d4eba { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .platform-module-01 .module-visual-image { grid-column: 2 !important; grid-row: 1 !important; } /* MODULE 02 — visual/image LEFT */ main.intruno-page #sec-modules .platform-module-02 .module-visual-image { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .platform-module-02 .dc-platform-5d1d4eba { grid-column: 2 !important; grid-row: 1 !important; } /* MODULE 03 — visual/image RIGHT */ main.intruno-page #sec-modules .platform-module-03 .dc-platform-5d1d4eba { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .platform-module-03 .module-visual-image { grid-column: 2 !important; grid-row: 1 !important; } /* MODULE 04 — visual/image LEFT */ main.intruno-page #sec-modules .platform-module-04 .module-visual-image { grid-column: 1 !important; grid-row: 1 !important; } main.intruno-page #sec-modules .platform-module-04 .dc-platform-5d1d4eba { grid-column: 2 !important; grid-row: 1 !important; } /* * Critical: the screenshot must remain INSIDE the visual panel. * Do not position it absolutely and do not let it escape into * the adjacent text column. */ main.intruno-page #sec-modules .module-visual-image { position: relative !important; display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } main.intruno-page #sec-modules .module-product-image { position: relative !important; inset: auto !important; float: none !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 22px !important; transform: none !important; object-fit: contain !important; box-sizing: border-box !important; } /* Existing DC visual UI stays underneath the product screenshot. */ main.intruno-page #sec-modules .module-visual-image > div:not(.module-product-image) { position: relative !important; z-index: 1 !important; } /* Desktop visual balance — image first, existing UI below. */ @media (min-width: 901px) { main.intruno-page #sec-modules .module-visual-image { justify-content: center !important; } main.intruno-page #sec-modules .module-product-image { border-radius: 10px !important; box-shadow: 0 12px 30px rgba(28,43,43,.12) !important; } } /* Mobile follows the original one-column module flow. */ @media (max-width: 900px) { main.intruno-page #sec-modules .platform-module-01 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-02 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-03 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-04 > .dc-platform-ed35adaa { display: flex !important; flex-direction: column !important; } main.intruno-page #sec-modules .platform-module-01 .dc-platform-5d1d4eba, main.intruno-page #sec-modules .platform-module-01 .module-visual-image, main.intruno-page #sec-modules .platform-module-02 .dc-platform-5d1d4eba, main.intruno-page #sec-modules .platform-module-02 .module-visual-image, main.intruno-page #sec-modules .platform-module-03 .dc-platform-5d1d4eba, main.intruno-page #sec-modules .platform-module-03 .module-visual-image, main.intruno-page #sec-modules .platform-module-04 .dc-platform-5d1d4eba, main.intruno-page #sec-modules .platform-module-04 .module-visual-image { grid-column: auto !important; grid-row: auto !important; } } /* MODULES — requested alternating image-under-text layout */ main.intruno-page #sec-modules .platform-module-01 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-02 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-03 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-04 > .dc-platform-ed35adaa { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; direction:ltr !important; } /* 01: text + laptop LEFT / visual RIGHT */ main.intruno-page #sec-modules .platform-module-01 .dc-platform-5d1d4eba {grid-column:1 !important;grid-row:1 !important;} main.intruno-page #sec-modules .platform-module-01 .dc-platform-674cdc1d {grid-column:2 !important;grid-row:1 !important;} /* 02: visual LEFT / text + laptop RIGHT */ main.intruno-page #sec-modules .platform-module-02 .dc-platform-98f7dbce {grid-column:1 !important;grid-row:1 !important;} main.intruno-page #sec-modules .platform-module-02 .dc-platform-5d1d4eba {grid-column:2 !important;grid-row:1 !important;} /* 03: text + laptop LEFT / visual RIGHT */ main.intruno-page #sec-modules .platform-module-03 .dc-platform-5d1d4eba {grid-column:1 !important;grid-row:1 !important;} main.intruno-page #sec-modules .platform-module-03 .dc-platform-674cdc1d {grid-column:2 !important;grid-row:1 !important;} /* 04: visual LEFT / text + laptop RIGHT */ main.intruno-page #sec-modules .platform-module-04 .dc-platform-98f7dbce {grid-column:1 !important;grid-row:1 !important;} main.intruno-page #sec-modules .platform-module-04 .dc-platform-5d1d4eba {grid-column:2 !important;grid-row:1 !important;} /* Laptop wrapper */ main.intruno-page #sec-modules .platform-module-04 .module-laptop, main.intruno-page #sec-modules .platform-module-02 .module-laptop{ margin:26px 30px 0 !important; } main.intruno-page #sec-modules .platform-module-01 .module-laptop, main.intruno-page #sec-modules .platform-module-03 .module-laptop{ margin:26px 0 0 30px !important; } main.intruno-page #sec-modules .module-laptop { position:relative !important; width:100% !important; max-width:430px; padding-bottom:20px !important; box-sizing:border-box !important; z-index:2 !important; } main.intruno-page #sec-modules .module-laptop-screen { position:relative !important; padding:8px !important; background:#1c2b2b !important; border-radius:15px 15px 5px 5px !important; box-shadow:0 14px 28px rgba(28,43,43,.16) !important; } main.intruno-page #sec-modules .module-laptop-screen::after { content:"" !important; position:absolute !important; left:-7% !important; right:-7% !important; bottom:-18px !important; height:18px !important; background:#1c2b2b !important; border-radius:0 0 12px 12px !important; } main.intruno-page #sec-modules .module-laptop-screen img { display:block !important; width:100% !important; height:auto !important; max-width:none !important; margin:0 !important; border-radius:4px !important; } main.intruno-page #sec-modules .module-laptop-base { position:absolute !important; left:43% !important; bottom:0 !important; width:14% !important; height:4px !important; background:#263838 !important; border-radius:0 0 4px 4px !important; } main.intruno-page #sec-modules .module-laptop-base span { display:block !important; width:45% !important; height:3px !important; margin:auto !important; background:rgba(255,255,255,.18) !important; border-radius:0 0 3px 3px !important; } main.intruno-page #sec-modules .module-demo-note { display:block !important; margin-top:22px !important; font-family:Figtree,sans-serif !important; font-size:12px !important; color:oklch(52% .012 85) !important; } .platform-module-02 .module-demo-note, .platform-module-04 .module-demo-note{ padding: 20px 5px 20px 20px; max-width: 195px; margin-left: auto; } @media (min-width:901px) { main.intruno-page #sec-modules .platform-module-02 .module-laptop, main.intruno-page #sec-modules .platform-module-04 .module-laptop { margin-left:auto !important; } } @media (max-width:900px) { main.intruno-page #sec-modules .platform-module-01 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-02 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-03 > .dc-platform-ed35adaa, main.intruno-page #sec-modules .platform-module-04 > .dc-platform-ed35adaa { display:flex !important; flex-direction:column !important; } main.intruno-page #sec-modules .module-laptop { width:100% !important; max-width:620px !important; margin-left:0 !important; margin-right:0 !important; } } /* ========================================================= MODULE LAPTOP — ZOOMED IMAGE CALLOUT Same product screenshot, enlarged and cropped to a specific UI area, matching the DC template treatment. ========================================================= */ main.intruno-page #sec-modules .module-laptop { overflow: visible !important; } main.intruno-page #sec-modules .module-laptop-callout { position: absolute !important; top: 48% !important; width: 83% !important; aspect-ratio: 475 / 205 !important; overflow: hidden !important; background: #fff !important; border: 1px solid rgba(28,43,43,.12) !important; border-radius: 13px !important; box-shadow: 0 18px 38px rgba(28,43,43,.24) !important; z-index: 20 !important; pointer-events: none !important; } main.intruno-page #sec-modules .module-laptop-callout img { position: absolute !important; display: block !important; width: 380% !important; max-width: none !important; height: auto !important; margin: 0 !important; } /* Text/image on LEFT: callout projects into the RIGHT panel. */ main.intruno-page #sec-modules .platform-module-01 .module-laptop-callout, main.intruno-page #sec-modules .platform-module-03 .module-laptop-callout { left:55% !important; } /* Text/image on RIGHT: mirror the callout into the LEFT panel. */ main.intruno-page #sec-modules .platform-module-02 .module-laptop-callout, main.intruno-page #sec-modules .platform-module-04 .module-laptop-callout { left: -38% !important; } /* Crop positions — each shows a useful UI area rather than the full image. */ main.intruno-page #sec-modules .platform-module-01 .module-laptop-callout img { left: -36% !important; top: -140% !important; } main.intruno-page #sec-modules .platform-module-03 .module-laptop-callout img { left: -5% !important; top: -45% !important; } main.intruno-page #sec-modules .platform-module-02 .module-laptop-callout img { left: -7% !important; top: -84% !important; } main.intruno-page #sec-modules .platform-module-04 .module-laptop-callout img { left: -28% !important; bottom: -62% !important; } @media (max-width: 900px) { main.intruno-page #sec-modules .module-laptop-callout { width: 62% !important; top: 44% !important; } main.intruno-page #sec-modules .platform-module-01 .module-laptop-callout, main.intruno-page #sec-modules .platform-module-03 .module-laptop-callout { right: -8% !important; left: auto !important; } main.intruno-page #sec-modules .platform-module-02 .module-laptop-callout, main.intruno-page #sec-modules .platform-module-04 .module-laptop-callout { left: -8% !important; right: auto !important; } }