#how-uli-works{background:linear-gradient(to bottom,var(--green-light70),var(--green-light90));#animation-wrapper{height:100%}#animation-inner-content{display:flex;justify-content:center;align-items:center;border:transparent;background:linear-gradient(to bottom,color-mix(in oklch,var(--slate-light90) 90%,transparent),color-mix(in oklch,var(--slate-light90) 40%,transparent))}.hiw-step-card{display:flex;flex-direction:column;gap:var(--nano);border:1px solid var(--green-light20);background-color:transparent;cursor:pointer;transition:border .2s ease;overflow:hidden;.hiw-step-heading{transition:font-weight .2s ease}.hiw-step-text{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;opacity:0;>*{overflow:hidden}}&.active{border:2px solid hsl(var(--neem));.hiw-step-heading{font-weight:700}.hiw-step-text{grid-template-rows:1fr;opacity:1}}}}#uli-step1-animation{display:flex;flex-direction:column;align-items:center;justify-content:center;#platform-card{width:320px!important;padding:16px 0;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:hidden;position:relative;min-height:180px;z-index:20;.services-row{width:100%;height:56px;position:relative;overflow:hidden;.services-strip{position:absolute;display:flex;gap:8px}}.services-card{width:56px;min-width:56px;aspect-ratio:1;border:1px solid var(--spring);display:flex;align-items:center;justify-content:center;flex-shrink:0}}#pipeline{position:relative;width:4px;height:80px;background-color:hsla(var(--neem),.2);&:after{content:"";position:absolute;width:3px;height:16px;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,var(--green-light80),var(--green-light40),transparent);box-shadow:0 0 6px var(--green),0 0 20px color-mix(in oklch,var(--green) 20%,transparent);z-index:10;animation:greenGlowTravel 2s ease-in-out infinite}}#integration-card{width:80px;aspect-ratio:1;z-index:20;display:flex;align-items:center;justify-content:center}}#uli-step2-animation{display:flex;flex-direction:column;align-items:center;justify-content:center;#platform-card{width:320px!important;padding:16px 0;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:hidden;position:relative;min-height:180px;z-index:20;.services-row{width:100%;height:56px;position:relative;.services-strip{position:absolute;display:flex;gap:8px}}.services-card{width:56px;min-width:56px;aspect-ratio:1;border:1px solid var(--spring);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:box-shadow .3s ease-in,border-color .3s ease-in;&.glowing{border-color:var(--blue);background-color:var(--blue-light70);box-shadow:0 0 6px var(--blue),0 0 12px color-mix(in oklch,var(--blue) 40%,transparent),0 0 18px color-mix(in oklch,var(--blue) 20%,transparent);animation:glowFadeOut 3s ease-out forwards}}}#pipeline{position:relative;width:4px;height:80px;background-color:hsla(var(--neem),.2);&:after{content:"";position:absolute;width:3px;height:16px;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,var(--green-light80),var(--green-light40),transparent);box-shadow:0 0 6px var(--green),0 0 20px color-mix(in oklch,var(--green) 20%,transparent);z-index:10;animation:greenGlowTravel 2s ease-in-out infinite reverse}}#integration-card{width:80px;aspect-ratio:1;z-index:20;display:flex;align-items:center;justify-content:center}}#uli-step3-animation{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:400px;#platform-card{width:320px!important;padding:16px 0;display:flex;flex-direction:column;gap:8px;align-items:center;overflow:hidden;position:relative;min-height:180px;z-index:20;#document{width:110px;height:110px;display:flex;justify-content:center;align-items:center}}#pipeline{width:4px;height:80px;background-color:hsla(var(--neem),.6);position:relative;&:after{content:"";position:absolute;width:3px;height:16px;top:0;left:50%;transform:translateX(-50%);background:linear-gradient(to bottom,transparent,var(--green-light80),var(--green-light40),transparent);box-shadow:0 0 6px var(--green),0 0 20px color-mix(in oklch,var(--green) 20%,transparent);z-index:10;animation:greenGlowTravel 2s ease-in-out infinite}}#integration-card{width:80px;aspect-ratio:1;z-index:20;display:flex;align-items:center;justify-content:center}}@keyframes greenGlowTravel{0%{top:80px;opacity:0}10%{opacity:1}90%{opacity:1}to{top:-10px;opacity:0}}#uli-step4-animation{display:flex;justify-content:center;align-items:center;min-height:400px;width:80%;#analytics-wrapper{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);grid-gap:var(--nano);gap:var(--nano)}.analytics-card{height:100px;display:flex;justify-content:center;align-items:center;&.double-width{grid-column:span 2}}.line-chart{width:100%;height:100%;margin-top:12px;.chart-line{transition:all 1s ease-in-out}}.bar-chart{width:100%;height:100%;margin-top:12px;.bar{transition:all 1s ease-in-out}}.radial-chart{width:100%;height:100%;.radial-bar{transition:stroke-dashoffset 1s ease-in-out}}.bullet-chart{width:100%;height:100%;.bullet-bar{transition:width 1s ease-in-out}}.treemap-chart{width:60%;height:60%;.treemap-rect{transition:all 1s ease-in-out}}}#uli-hero{position:relative;width:100%;height:100%;max-height:100%;max-width:100%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto 40px auto auto 40px auto;grid-gap:var(--nano) var(--micro);gap:var(--nano) var(--micro);padding:4vh;-webkit-user-select:none;-moz-user-select:none;user-select:none;grid-template-areas:"dsp1 dsp2  dsp3 dsp4" ".    .    .     .   " "uli  uli   uli   uli" "uli  uli   uli   uli" ".    .    .     .   " "bank1 bank2 bank3 bank4";@media screen and (max-width:600px){padding-left:0;padding-bottom:0;padding-right:0;padding-top:0;gap:var(--nano)}#dsp-1{grid-area:dsp1}#dsp-2{grid-area:dsp2}#dsp-3{grid-area:dsp3}#dsp-4{grid-area:dsp4}#uli-card{grid-area:uli;background:linear-gradient(to bottom right,var(--spring-light20),var(--spring-light80));border:5px solid var(--white)}#bank-1{grid-area:bank1}#bank-2{grid-area:bank2}#bank-3{grid-area:bank3}#bank-4{grid-area:bank4}.entity-card{display:flex;flex-direction:column;gap:var(--nano);justify-content:center;align-items:center;position:relative;z-index:2;svg{width:48px}}.dsp-card{background:linear-gradient(to bottom,var(--green-light60),var(--green-light90));aspect-ratio:1;@media screen and (max-width:600px){aspect-ratio:unset}}.bank-card{background:linear-gradient(to bottom,var(--sky-light60),var(--sky-light90));aspect-ratio:1;@media screen and (max-width:600px){aspect-ratio:unset}}.flow-line{stroke-dasharray:.2 .3;animation:flow 1.5s linear infinite}.bank-to-uli-line{fill:url(#bank-to-uli-gradient);rx:.05px}.uli-to-dsp-line{fill:url(#uli-to-dsp-gradient);rx:.05px}}@keyframes flow{0%{stroke-dashoffset:.5}to{stroke-dashoffset:0}}#uli-page{#uli-page-banner{position:fixed;top:56px;width:100%;height:32px;background-color:var(--spring-light60);z-index:5000;display:flex;align-items:center;justify-content:center;overflow:hidden;&:after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);animation:banner-shine 10s ease-in-out infinite}}.hero-window{height:80vh}.hero-bg{background:linear-gradient(to bottom,hsl(var(--neem)),var(--spring-light80));height:100%}#hero-content{display:flex;flex-direction:column;justify-content:center;height:100%}#uli-bento-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);grid-gap:var(--micro);gap:var(--micro);width:100%;aspect-ratio:1/1;@media screen and (max-width:960px){gap:var(--nano);aspect-ratio:auto;grid-auto-rows:minmax(200px,auto)}@media screen and (max-width:800px){grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-auto-rows:minmax(180px,auto)}.point-card{background-color:var(--spring-light90);border:1px solid var(--spring);border-radius:16px;padding:32px;overflow:hidden;@media screen and (max-width:1200px){padding-left:24px;padding-bottom:120px;padding-right:24px;padding-top:24px;aspect-ratio:auto;border-radius:12px}@media screen and (max-width:800px){padding-left:24px;padding-bottom:120px;padding-right:24px;padding-top:24px}.card-content{position:relative;z-index:50}.card-image{z-index:-1}.card-image svg{position:absolute;width:320px;right:24px;bottom:24px;max-width:48%;@media screen and (max-width:800px){width:160px;right:8%;bottom:-24%}}}.metric-card{background-color:var(--spring-light90);border:1px solid var(--spring);border-radius:16px;padding:32px;display:flex;flex-direction:column;justify-content:center;@media screen and (max-width:960px){padding-left:24px;padding-bottom:24px;padding-right:24px;padding-top:24px;aspect-ratio:auto;border-radius:12px}@media screen and (max-width:800px){padding-left:16px;padding-bottom:16px;padding-right:16px;padding-top:16px}h6{font-size:4rem;font-weight:400;@media screen and (max-width:960px){font-size:3rem}@media screen and (max-width:800px){font-size:2.5rem}}}#point-1{grid-column:1/3;grid-row:1/4;.card-image svg{bottom:-16px}}#point-2{grid-column:3/7;grid-row:1/3;.card-image svg{bottom:-64px;@media screen and (max-width:800px){bottom:-24px}}}#point-3{grid-column:1/4;grid-row:4/7;.card-image svg{bottom:-16px}}#point-4{grid-column:4/7;grid-row:4/7;.card-image svg{bottom:-32px}}#metric-1{grid-column:3/5;grid-row:3/4}#metric-2{grid-column:5/7;grid-row:3/4}@media screen and (max-width:800px){#point-1,#point-2,#point-3,#point-4{grid-column:1/3;grid-row:auto}#metric-1,#metric-2{grid-column:auto;grid-row:auto}}}#available-services{#list-of-categories{display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;@media screen and (max-width:1200px){gap:var(--nano);[data-badge]{font-size:14px}}}[data-badge]{background-color:white;border:1px solid var(--slate-light40);color:hsl(var(--charcoal));cursor:pointer;transition:all .2s ease;font-size:1rem;&:hover{border-color:var(--slate-light60)}&.selected{background-color:hsl(var(--neem));border-color:hsl(var(--neem));color:white}}#list-of-services>div{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:0 var(--micro);gap:0 var(--micro);@media screen and (max-width:800px){grid-template-columns:repeat(2,1fr)}>div>p{flex:1 1}}.service-card{display:grid;grid-template-columns:auto 1fr;grid-gap:16px;gap:16px;padding:16px;border-bottom:1px solid var(--slate-light60)}}#security-points-cards{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-gap:var(--micro);gap:var(--micro);width:100%;[data-card]{aspect-ratio:1/1;overflow:hidden;[data-card]{border:none;background:linear-gradient(to bottom,var(--transparent),var(--spring-light40))}svg{position:absolute;right:8px;bottom:8px;max-width:48%;max-height:48%}}@media screen and (max-width:1200px){[data-card]{padding:8px!important}[data-card] [data-card]{padding:16px!important}}}.small-feature-card{[data-card]{background:linear-gradient(to bottom,hsla(var(--neem),.32),var(--transparent))}}}@keyframes banner-shine{0%{left:-100%}40%{left:150%}to{left:150%}}