:root{
    --bl1:rgb(142,142,147);--bl2:rgb(129,120,253);
    --d0:rgb(0,0,0);--d1:#101010;--d2:#161616;--d3:#1e1e1e;--d4:#323232;--d45:#343434;--d5:#8e8e8e;--d52:rgb(176,176,176,.2);--d54:rgb(176,176,176,.4);--d56:rgb(176,176,176,.6);--d6:#b4b4c1;--d7:#A9A9A9;
    --g2:#34C759;
    --gr3:#1f1f1f;
    --gr1:rgb(31,31,31);
    --gr61:rgba(82, 82, 82,.1);
    --h1fs:34pt;
    --icr:18.5px;
    --l0:rgb(255,255,255);--l3:rgb(103,103,103);--l9:rgb(175,175,175);
    --pl0:#5246ff;--pl1:rgb(26,13,201);
    --p3:#D2CFFF;
    --rd1:rgb(255,0,0);
    --yw1:#E4A70A;
    --zi-chattop:888888;--zi-over:999999;   
}
@font-face{font-family:'Inter';src:url('../font/inter-regular.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'InterBold';src:url('../font/inter-bold.ttf') format('truetype');font-weight:bold;font-style:bold;}
@font-face{font-family:'InterMedium';src:url('../font/inter-medium.ttf') format('truetype');font-weight:normal;font-style:normal;}
@font-face{font-family:'InterSemiBold';src:url('../font/inter-semibold.ttf') format('truetype');font-weight:bold;font-style:bold;}            

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

*{
    box-sizing:border-box;
    &[hide]{display:none;opacity:0;visibility:hidden;}
    &[d]{color:var(--d0);}
    &[d='1']{background:var(--l0);border-color:var(--l0);}
    &[d='8']{background:var(--bl2);border-color:var(--bl2);}
    &[d='11']{background:#e89700;border-color:#e89700;}
    &[d='12']{background:#8a00ca;border-color:#8a00ca;color:var(--l0);}
    &[d='13']{background:#26e2b6;border-color:#26e2b6;}
    &[d='29']{background:#00c8ff;border-color:#00c8ff;}
    &[d='30']{background:#1adc00;border-color:#1adc00;}
    &[d='31']{background:#ffffff;border-color:#ffffff;}
    &[d='32']{background:#950505;border-color:#950505;color:var(--l0);}
    &[d='33']{background:#ff0000;border-color:#ff0000;}
    &[d='34']{background:#f2ff00;border-color:#f2ff00;}
    &[d='48']{background:#0032b1;border-color:#0032b1;color:var(--l0);}
    &[d='50']{background:#370051;border-color:#370051;color:var(--l0);}
    &[d='53']{background:#f797c4;border-color:#f797c4;}
    &[d='58']{background:#d2cfff;border-color:#d2cfff;}
    &[dt]{display:flex;flex-direction:row;&::before{align-self:center;border-radius:20px;content:'';display:block;height:12px;justify-self:center;margin-right:5.5px;max-height:12px;max-width:12px;width:12px;}}
    &[dt='1']::before{background:var(--l0);}
    &[dt='8']::before{background:var(--bl2);}
    &[dt='11']::before{background:#e89700;}
    &[dt='12']::before{background:#8a00ca;}
    &[dt='13']::before{background:#26e2b6;}
    &[dt='29']::before{background:#00c8ff;}
    &[dt='30']::before{background:#1adc00;}
    &[dt='31']::before{background:#ffffff;}
    &[dt='32']::before{background:#950505;}
    &[dt='33']::before{background:#ff0000;}
    &[dt='34']::before{background:#f2ff00;}
    &[dt='48']::before{background:#0032b1;}
    &[dt='50']::before{background:#370051;}
    &[dt='50']::before{background:#370051;}
    &[dt='53']::before{background:#f797c4;}
    &[dt='58']::before{background:#d2cfff;}
    &[inv]{opacity:0;pointer-events:none;user-select:none;}
    &[show]{position:relative;z-index:var(--zi-over);}
}
*{box-sizing:border-box;}
body{background:rgb(28,28,28);color:white;font-family:'Inter';height:max-content;letter-spacing:0.2px;margin:0;min-height:100vh;min-width:1050px;overflow-x:hidden;padding:0;width:100vw;}
button{
    border:0;border-radius:10px;background:transparent;color:rgb(142,142,142);
    &[blue]{background:rgba(82,70,255);color:white;font-family:'InterBold';font-size:17px;height:48px;max-height:48px;padding:13px 22.5px;white-space:nowrap;}
}
details>summary{list-style:none;}
details>summary::-webkit-details-marker{display:none;}
form{align-items:flex-start;display:flex;color:white;flex-direction:column;height:max-content;width:100%;input{background:transparent;border:0;outline:0;}}
h1,h2,h3,h4,h5,h6{font-family:'InterBold';margin:0;padding:0;}
/* h1{color:var(--l9);font-weight:bold;font-size:var(--h1fs);margin:0;padding:0;} */
html,body{overscroll-behavior:none;}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--l0);transition:background-color 5000s ease-in-out 0s;box-shadow:inset 0 0 20px 20px #23232329;}
section{
    display:flex;flex-direction:row;min-width:800px;overflow-x:hidden;overflow-y:hidden;
    &:nth-child(2n){background:rgb(38,38,38);}
    &:nth-child(2n + 1){background:rgb(28,28,28);}
    >img,info{max-width:50%;min-width:50%;width:50%;}
    &[comment]{
        align-items:center;flex-direction:column;justify-content:center;line-height:24px;padding:10vw 20vw;
        h2{font-size:32px;font-weight:'InterBold';margin:0 0 31px 0;}
        span{
            text-align:center;
            &:nth-child(4){margin:24px 0 0;}
        }
    }
    &[footer]{
        gap:19.5px;min-height:414px;padding:80px 12vw;
        >column{
            align-items:flex-start;
            display:flex;
            flex-direction:column;
            flex-grow:0;
            div{color:rgb(142,142,142);margin:0 0 25px 0;}
            h2,h3{margin:0 0 20px 0;}
            social{display:flex;flex-direction:row;gap:20px;}
            &:first-child{margin-right:auto;width:40%;}
            &:nth-child(2){margin-right:50px;}
            &:nth-child(2),&:nth-child(3){
                max-width:max-content;min-width:max-content;width:max-content;
                a{color:rgb(142,142,142);font-family:'InterBold';height:24px;line-height:24px;text-decoration:none;}
            }
        }
    }
    &[home]{
        align-items:flex-start;
        background:url('/lib/img/bkgd.png');
        background-position:center;
        background-size:cover;
        flex-direction:column;
        height:100vh;
        justify-content:flex-start;
        max-width:100vw;
        min-width:100vw;
        overflow:hidden;
        width:100vw;
        >*{display:flex;width:80vw;}
        content{
            align-items:center;
            flex-direction:row;
            flex-grow:0;
            height:max-content;
            justify-content:center;
            margin:100px 10vw 48px 10vw;
            img{width:60%;}
            info{
                display:flex;
                flex-direction:column;
                margin:0 0 0 2.5vw;
                max-width:423px;
                min-width:423px;
                width:423px;
                form{
                    display:flex;flex-direction:column;height:max-content;width:100%;
                    button{margin-top:8px;}
                    label{
                        align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;margin:0 0 16px 0;width:100%;
                        input{
                            border-bottom:.5px solid rgb(56,56,58);color:white;height:44px;width:100%;
                            &::placeholder{color:rgb(108,108,108);}
                        }
                        span{font-family:'InterBold';font-size:16px;height:22px;margin:0 0 4px 0;width:100%;}
                    }
                }
                h1{font-family:'InterBold';font-size:48px;letter-spacing:0.2px;margin:0 0 26px 0;}
                h3{
                    font-family:'InterBold';
                    font-size:44px;
                    margin-bottom:24px;
                }
                p{display:block;font-family:'Inter';font-size:20px;letter-spacing:0.2px;margin:0 0 24px 0;}
                >div{font-size:30px;width:80%;}
            }
        }
        trust{
            overflow:hidden;
            padding-left:5vw;
            width:100vw;
            slide{
                align-items:center;
                display:flex;
                flex-direction:row;
                flex-grow:0;
                gap:40px;
                height:82px;
                justify-content:flex-start;
                margin:0;
                max-width:max-content;
                min-width:max-content;
                position:absolute;
                width:max-content;

            }
        }    
    }
    &[ai],&[beta],&[info],&[request],&[vendor],&[what],&[who]{
        align-items:center;gap:7vw;padding:10vw 15vw;max-width:100vw;min-width:1050px;width:100vw;
        info{
            /* padding:20px; */
            min-width:423px;
            h2{margin-bottom:24px;}
            button{height:48px;margin-top:52px;max-width:max-content;min-width:max-content;width:max-content;}
            ul{
                color:rgb(142,142,142);font-size:16px;line-height:20px;margin:24px 0 24px 0px;
                li{margin: 0 0 16px -16px;}
            }
        }
    }
    &[beta]{
        gap:23%;padding:8vw;
        button{flex-grow:0;}
        info{max-width:max-content;width:60%;flex-grow:1;}
    }
    &[clients]{
        align-items:flex-start;flex-direction:column;justify-content:center;padding:100px;
        arrows{
            align-self:center;display:flex;gap:20px;
            button{
                background:rgba(82, 70, 255, 1);border-radius:90px;height:40px;width:40px;
                svg{fill:white;height:16px;width:16px;}
                &:first-child{svg{margin: 4px 0 0 -3px;}}
                &:last-child{svg{margin: 4px -3px 0 0;}}
                >*{pointer-events:none;}
            }
        }
        cards{
            display:flex;flex-direction:row;gap:32px;margin:48px 0;
            transition:margin-left calc(167ms / 2) 167ms ease-out;
            card{
                align-items:center;display:block;background:white;border-radius:8px;height:328px;justify-content:center;padding:35px 40px;max-width:328px;min-width:328px;width:328px;
                >div{color:rgba(37,43,66);font-size:14px;height:100px;line-height:20px;}
                stars{&[total='0']{svg{path{fill:transparent;stroke-width:1px;stroke:rgb(115,115,115);}}}&[total='1']{svg:nth-child(2),svg:nth-child(3),svg:nth-child(4),svg:last-child{path{fill:transparent;stroke-width:1px;stroke:rgb(115,115,115);}}}&[total='2']{svg:nth-child(3),svg:nth-child(4),svg:last-child{path{fill:transparent;stroke-width:1px;stroke:rgb(115,115,115);}}}&[total='3']{svg:nth-child(4),svg:last-child{path{fill:transparent;stroke-width:1px;stroke:rgb(115,115,115);}}}&[total='4']{svg:last-child{path{fill:transparent;stroke-width:1px;stroke:rgb(115,115,115);}}}}
                user{
                    align-items:flex-start;display:flex;flex-direction:row;height:40px;justify-content:flex-start;margin-top:20px;width:100%;
                    div{
                        margin:0 0 0 16px;
                        name{color:rgba(37,43,66);display:block;font-family:'InterBold';height:24px;line-height:24px;width:100%;}
                        role{color:rgb(115,115,115);display:block;font-family:'Inter';font-size:12px;height:16px;line-height:16px;width:100%;}
                    }
                    icon{background:rgb(37,43,66);border-radius:90px;height:40px;line-height:40px;text-align:center;width:40px;}
                }
            }
        }
        h2{align-self:center;}
    }
    &[what]{
        flex-direction:column;gap:0;padding:10vw;
        grid{
            display:grid;grid-template-columns:50% 50%;grid-template-rows:50% 50%;margin:calc(31px / 2) 0;
            box{
                align-items:center;background:white;border-radius:8px;display:flex;flex-direction:column;justify-content:center;margin:calc(31px / 2);padding:35px 40px;
                h5{color:rgb(37,43,66);font-size:20px;line-height:24px;margin:0 0 8px;text-align:center;width:60%;}
                icon{align-items:center;background:rgb(213,211,246);border-radius:90px;display:flex;flex-direction:column;height:72px;justify-content:center;margin:0 0 20px 0;min-height:72px;max-height:72px;width:72px;}
                span{color:black;font-size:16px;text-align:center;letter-spacing:0.2px;line-height:18px;width:100%;}
            }
        }
    }
}
top{
    align-items:center;
    backdrop-filter:blur(10px);
    display:flex;
    flex-direction:row;
    flex-grow:0;
    gap:40px;
    height:96px;
    max-height:96px;
    min-height:96px;
    padding:0 100px;
    position:fixed;
    top:0;
    width:100vw;
    z-index:999;
    >*{height:24px;}
    button,details{color:rgb(142,142,142);font-family:'InterMedium';font-size:16px;height:48px;max-height:48px;min-height:48px;overflow:hidden;}
    button{
        &[blue]{color:white;}
    }
    details{
        line-height:48px;
        summary{svg{path{fill:rgb(142,142,142);}}}
        &:nth-child(3){margin-right:auto;}
    }
    icon{height:40px;width:40px;}
}