*,:before,:after{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}
::backdrop{
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}
*,:before,:after{
    box-sizing:border-box;
    border-width:0;
    border-style:solid;
    border-color:#e5e7eb
}
:before,:after{
    --tw-content: ""
}
html,:host{
    line-height:1.5;
    -webkit-text-size-adjust:100%;
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
    font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
    font-feature-settings:normal;
    font-variation-settings:normal;
    -webkit-tap-highlight-color:transparent
}
body{
    margin:0;
    line-height:inherit
}
hr{
    height:0;
    color:inherit;
    border-top-width:1px
}
abbr:where([title]){
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
}
h1,h2,h3,h4,h5,h6{
    font-size:inherit;
    font-weight:inherit
}
a{
    color:inherit;
    text-decoration:inherit
}
b,strong{
    font-weight:bolder
}
code,kbd,samp,pre{
    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
    font-feature-settings:normal;
    font-variation-settings:normal;
    font-size:1em
}
small{
    font-size:80%
}
sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sub{
    bottom:-.25em
}
sup{
    top:-.5em
}
table{
    text-indent:0;
    border-color:inherit;
    border-collapse:collapse
}
button,input,optgroup,select,textarea{
    font-family:inherit;
    font-feature-settings:inherit;
    font-variation-settings:inherit;
    font-size:100%;
    font-weight:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    color:inherit;
    margin:0;
    padding:0
}
button,select{
    text-transform:none
}
button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){
    -webkit-appearance:button;
    background-color:transparent;
    background-image:none
}
:-moz-focusring{
    outline:auto
}
:-moz-ui-invalid{
    box-shadow:none
}
progress{
    vertical-align:baseline
}
::-webkit-inner-spin-button,::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-2px
}
::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}
summary{
    display:list-item
}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{
    margin:0
}
fieldset{
    margin:0;
    padding:0
}
legend{
    padding:0
}
ol,ul,menu{
    list-style:none;
    margin:0;
    padding:0
}
dialog{
    padding:0
}
textarea{
    resize:vertical
}
input::-moz-placeholder,textarea::-moz-placeholder{
    opacity:1;
    color:#9ca3af
}
input::placeholder,textarea::placeholder{
    opacity:1;
    color:#9ca3af
}
button,[role=button]{
    cursor:pointer
}
:disabled{
    cursor:default
}
img,svg,video,canvas,audio,iframe,embed,object{
    display:block;
    vertical-align:middle
}
img,video{
    max-width:100%;
    height:auto
}
[hidden]:where(:not([hidden=until-found])){
    display:none
}
hr{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity))
}
.container{
    width:100%;
    margin-right:auto;
    margin-left:auto;
    padding-right:1rem;
    padding-left:1rem
}
@media (min-width: 640px){
    .container{
        max-width:640px
    }
}
@media (min-width: 768px){
    .container{
        max-width:768px;
        padding-right:1.5rem;
        padding-left:1.5rem
    }
}
@media (min-width: 1024px){
    .container{
        max-width:1024px
    }
}
@media (min-width: 1280px){
    .container{
        max-width:1280px
    }
}
@media (min-width: 1536px){
    .container{
        max-width:1536px
    }
}
.button{
    display:inline-flex;
    height:2.5rem;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    white-space:nowrap;
    border-radius:1.25rem;
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-button) / var(--tw-bg-opacity));
    padding-left:1rem;
    padding-right:1rem;
    text-align:center;
    font-size:1rem;
    line-height:1.5rem;
    font-weight:500;
    --tw-text-opacity: 1;
    color:rgb(var(--color-button-content) / var(--tw-text-opacity));
    outline-width:1px;
    outline-offset:2px;
    outline-color:rgb(var(--color-button) / 1);
    transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.button:hover{
    outline-style:solid
}
.button:focus{
    outline-style:solid
}
.button:disabled{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-line-dimmed) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color:rgb(var(--color-content) / var(--tw-text-opacity))
}
button:disabled{
    pointer-events:none;
    cursor:not-allowed;
    opacity:.5
}
.button-dimmed{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-button-dimmed) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color:rgb(var(--color-button-dimmed-content) / var(--tw-text-opacity));
    outline-color:rgb(var(--color-button-dimmed) / 1)
}
.button-outline{
    border-width:1px;
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity));
    background-color:transparent;
    --tw-text-opacity: 1;
    color:rgb(var(--color-content) / var(--tw-text-opacity))
}
.button-outline:hover{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line) / var(--tw-border-opacity));
    outline:2px solid transparent;
    outline-offset:2px
}
.button-outline:focus{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line) / var(--tw-border-opacity));
    outline:2px solid transparent;
    outline-offset:2px
}
.button-gradient{

    color:rgb(var(--color-gradient-content) / var(--tw-text-opacity))
}


.title-pink{
    color:rgb(var(--color-gradient-start) / var(--tw-bg-opacity));
}

.button-gradient:hover{
    background-color:rgb(var(--color-gradient-start) / var(--tw-bg-opacity));
    outline:2px solid transparent;
    color:rgb(var(--color-content) / var(--tw-text-opacity));
    outline-offset:2px
}
.button-gradient:focus{
    background-color:rgb(var(--color-gradient-start) / var(--tw-bg-opacity));
    outline:2px solid transparent;
    color:rgb(var(--color-content) / var(--tw-text-opacity));
}
@media (min-width: 768px){
    .button-lg{
        height:3.5rem;
        border-radius:1.75rem;
        padding-left:1.5rem;
        padding-right:1.5rem
    }
    .button-lg i{
        font-size:1.125rem;
        line-height:1.75rem
    }
}
.badge{
    display:inline-flex;
    height:2rem;
    align-items:center;
    gap:.375rem;
    border-radius:.75rem;
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-intermediate) / var(--tw-bg-opacity));
    padding-left:.75rem;
    padding-right:.75rem;
    font-size:.875rem;
    line-height:1.25rem;
    --tw-text-opacity: 1;
    color:rgb(var(--color-intermediate-content) / var(--tw-text-opacity))
}
@media (min-width: 768px){
    .badge{
        border-radius:1rem;
        font-size:1rem;
        line-height:1.5rem
    }
}
.badge i{
    font-size:1.25rem;
    line-height:1.75rem
}
h1{
    font-family:var(--font-family-secondary);
    font-size:2.25rem;
    line-height:2.5rem;
    font-weight:500;
    line-height:1.15
}
@media (min-width: 768px){
    h1{
        font-size:3rem;
        line-height:1
    }
}
h2{
    font-family:var(--font-family-secondary);
    font-size:1.5rem;
    line-height:2rem;
    font-weight:500
}
@media (min-width: 768px){
    h2{
        font-size:2.25rem;
        line-height:2.5rem
    }
}
h3{
    font-family:var(--font-family-secondary);
    font-size:1.125rem;
    line-height:1.75rem;
    font-weight:500
}
@media (min-width: 768px){
    h3{
        font-size:1.5rem;
        line-height:2rem
    }
}
x-avatar,.avatar{
    position:relative;
    display:flex;
    height:2.5rem;
    width:2.5rem;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    white-space:nowrap;
    border-radius:9999px;
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-intermediate) / var(--tw-bg-opacity));
    font-size:.75rem;
    line-height:1rem;
    font-weight:700;
    text-transform:uppercase;
    --tw-text-opacity: 1;
    color:rgb(var(--color-intermediate-content) / var(--tw-text-opacity))
}
x-avatar>img,.avatar>img{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    -o-object-fit:cover;
    object-fit:cover
}
x-avatar>svg,.avatar>svg{
    height:50%;
    width:50%
}
x-avatar>i,.avatar>i{
    font-size:1.5rem;
    line-height:2rem
}
x-avatar.avatar-lg,.avatar.avatar-lg{
    height:3.5rem;
    width:3.5rem
}
.scrolling-presets{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%
}
.scrolling-presets:before{
    pointer-events:none;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:20;
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-content: "";
    content:var(--tw-content);
    box-shadow:inset -32px 0 32px 32px rgb(var(--color-main) / .4)
}
.presets-wrapper{
    position:absolute;
    top:0;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    gap:.125rem;
    animation:scrollUp 30s linear infinite
}
.presets-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.125rem
}
@media (min-width: 768px){
    .presets-grid{
        grid-template-columns:repeat(6,minmax(0,1fr))
    }
}
.preset-item{
    display:flex;
    aspect-ratio:1 / 1;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    border-radius:.75rem;
    border-width:1px;
    border-color:transparent;
    background-color:rgb(var(--color-main) / .5);
    padding:1rem;
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.3s;
    animation:randomHighlight 8s infinite;
    animation-delay:var(--highlight-delay)
}
.preset-item i{
    display:flex;
    height:2.5rem;
    width:2.5rem;
    align-items:center;
    justify-content:center;
    border-radius:9999px;
    font-size:1.5rem;
    line-height:2rem;
    --tw-text-opacity: 1;
    color:rgb(255 255 255 / var(--tw-text-opacity));
    background:var(--random-color)
}
.preset-item:hover{
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-main) / var(--tw-bg-opacity));
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    animation:none
}
.preset-item:nth-child(18n+1){
    --highlight-delay: 0s
}
.preset-item:nth-child(18n+1) i{
    --random-color: rgb(99, 102, 241)
}
.preset-item:nth-child(18n+2){
    --highlight-delay: 1s
}
.preset-item:nth-child(18n+2) i{
    --random-color: rgb(236, 72, 153)
}
.preset-item:nth-child(18n+3){
    --highlight-delay: 2s
}
.preset-item:nth-child(18n+3) i{
    --random-color: rgb(34, 197, 94)
}
.preset-item:nth-child(18n+4){
    --highlight-delay: 3s
}
.preset-item:nth-child(18n+4) i{
    --random-color: rgb(249, 115, 22)
}
.preset-item:nth-child(18n+5){
    --highlight-delay: 4s
}
.preset-item:nth-child(18n+5) i{
    --random-color: rgb(168, 85, 247)
}
.preset-item:nth-child(18n+6){
    --highlight-delay: 5s
}
.preset-item:nth-child(18n+6) i{
    --random-color: rgb(234, 179, 8)
}
.preset-item:nth-child(18n+7){
    --highlight-delay: 6s
}
.preset-item:nth-child(18n+7) i{
    --random-color: rgb(14, 165, 233)
}
.preset-item:nth-child(18n+8){
    --highlight-delay: 7s
}
.preset-item:nth-child(18n+8) i{
    --random-color: rgb(239, 68, 68)
}
.preset-item:nth-child(18n+9){
    --highlight-delay: 8s
}
.preset-item:nth-child(18n+9) i{
    --random-color: rgb(20, 184, 166)
}
.preset-item:nth-child(18n+10){
    --highlight-delay: 9s
}
.preset-item:nth-child(18n+10) i{
    --random-color: rgb(217, 70, 239)
}
.preset-item:nth-child(18n+11){
    --highlight-delay: 10s
}
.preset-item:nth-child(18n+11) i{
    --random-color: rgb(45, 212, 191)
}
.preset-item:nth-child(18n+12){
    --highlight-delay: 11s
}
.preset-item:nth-child(18n+12) i{
    --random-color: rgb(251, 146, 60)
}
.preset-item:nth-child(18n+13){
    --highlight-delay: 12s
}
.preset-item:nth-child(18n+13) i{
    --random-color: rgb(124, 58, 237)
}
.preset-item:nth-child(18n+14){
    --highlight-delay: 13s
}
.preset-item:nth-child(18n+14) i{
    --random-color: rgb(16, 185, 129)
}
.preset-item:nth-child(18n+15){
    --highlight-delay: 14s
}
.preset-item:nth-child(18n+15) i{
    --random-color: rgb(244, 63, 94)
}
.preset-item:nth-child(18n+16){
    --highlight-delay: 15s
}
.preset-item:nth-child(18n+16) i{
    --random-color: rgb(59, 130, 246)
}
.preset-item:nth-child(18n+17){
    --highlight-delay: 16s
}
.preset-item:nth-child(18n+17) i{
    --random-color: rgb(202, 138, 4)
}
.preset-item:nth-child(18n+18){
    --highlight-delay: 17s
}
.preset-item:nth-child(18n+18) i{
    --random-color: rgb(147, 51, 234)
}
@keyframes scrollUp{
    0%{
        transform:translateY(0) scale(1.05) rotate(3deg)
    }
    to{
        transform:translateY(-33%) scale(1.05) rotate(3deg)
    }
}
.scrolling-presets:hover .presets-wrapper{
    animation-play-state:paused
}
@keyframes randomHighlight{
    0%,75%,to{
        background:rgba(var(--color-main) / .2)
    }
    25%,50%{
        background:rgba(var(--color-main) / .8)
    }
}
.pointer-events-none{
    pointer-events:none
}
.static{
    position:static
}
.absolute{
    position:absolute
}
.relative{
    position:relative
}
.inset-0{
    top:0;
    right:0;
    bottom:0;
    left:0
}
.bottom-0{
    bottom:0
}
.bottom-full{
    bottom:100%
}
.left-0{
    left:0
}
.left-0\.5{
    left:.125rem
}
.left-1\/2{
    left:50%
}
.left-5{
    left:1.25rem
}
.right-0{
    right:0
}
.right-1\/2{
    right:50%
}
.top-0{
    top:0
}
.top-0\.5{
    top:.125rem
}
.top-full{
    top:100%
}
.isolate{
    isolation:isolate
}
.z-10{
    z-index:10
}
.z-20{
    z-index:20
}
.my-10{
    margin-top:2.5rem;
    margin-bottom:2.5rem
}
.-mr-\[calc\(\(100\%-0\.5rem\)\/2\)\]{
    margin-right:calc((100% - .5rem)/2*-1)
}
.-mr-\[calc\(\(100\%-0\.5rem\)\/2\+0\.5rem\)\]{
    margin-right:calc(((100% - .5rem)/2 + .5rem)*-1)
}
.mb-10{
    margin-bottom:2.5rem
}
.ml-6{
    margin-left:1.5rem
}
.ml-auto{
    margin-left:auto
}
.mt-1{
    margin-top:.25rem
}
.block{
    display:block
}
.flex{
    display:flex
}
.inline-flex{
    display:inline-flex
}
.table{
    display:table
}
.grid{
    display:grid
}
.hidden{
    display:none
}
.aspect-square{
    aspect-ratio:1 / 1
}
.size-10{
    width:2.5rem;
    height:2.5rem
}
.size-14{
    width:3.5rem;
    height:3.5rem
}
.size-5{
    width:1.25rem;
    height:1.25rem
}
.h-10{
    height:2.5rem
}
.h-14{
    height:3.5rem
}
.h-20{
    height:5rem
}
.h-4\/5{
    height:80%
}
.h-6{
    height:1.5rem
}
.h-60{
    height:15rem
}
.h-7{
    height:1.75rem
}
.h-8{
    height:2rem
}
.h-full{
    height:100%
}
.max-h-72{
    max-height:18rem
}
.max-h-max{
    max-height:-moz-max-content;
    max-height:max-content
}
.min-h-\[1\.75rem\]{
    min-height:1.75rem
}
.w-0{
    width:0px
}
.w-1\/2{
    width:50%
}
.w-1\/3{
    width:33.333333%
}
.w-10{
    width:2.5rem
}
.w-12{
    width:3rem
}
.w-14{
    width:3.5rem
}
.w-2\/3{
    width:66.666667%
}
.w-32{
    width:8rem
}
.w-6{
    width:1.5rem
}
.w-60{
    width:15rem
}
.w-auto{
    width:auto
}
.w-full{
    width:100%
}
.max-w-28{
    max-width:7rem
}
.max-w-\[120px\]{
    max-width:120px
}
.max-w-\[calc\(\(100\%-0\.5rem\)\/2\)\]{
    max-width:calc((100% - .5rem)/2)
}
.max-w-sm{
    max-width:24rem
}
.max-w-xl{
    max-width:36rem
}
.max-w-xs{
    max-width:20rem
}
.shrink-0{
    flex-shrink:0
}
.grow{
    flex-grow:1
}
.origin-left{
    transform-origin:left
}
.-translate-x-1\/2{
    --tw-translate-x: -50%;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-1\/2{
    --tw-translate-y: -50%;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-1\/2{
    --tw-translate-x: 50%;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-1\/4{
    --tw-translate-y: 25%;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-180{
    --tw-rotate: 180deg;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-125{
    --tw-scale-x: 1.25;
    --tw-scale-y: 1.25;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-75{
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-90{
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-95{
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.scale-\[\.85\]{
    --tw-scale-x: .85;
    --tw-scale-y: .85;
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.transform{
    transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cursor-not-allowed{
    cursor:not-allowed
}
.cursor-pointer{
    cursor:pointer
}
.snap-x{
    scroll-snap-type:x var(--tw-scroll-snap-strictness)
}
.snap-mandatory{
    --tw-scroll-snap-strictness: mandatory
}
.snap-center{
    scroll-snap-align:center
}
.appearance-none{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none
}
.grid-cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr))
}
.grid-cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr))
}
.flex-row{
    flex-direction:row
}
.flex-col{
    flex-direction:column
}
.place-content-start{
    place-content:start
}
.items-start{
    align-items:flex-start
}
.items-end{
    align-items:flex-end
}
.items-center{
    align-items:center
}
.justify-center{
    justify-content:center
}
.justify-between{
    justify-content:space-between
}
.gap-0{
    gap:0px
}
.gap-0\.5{
    gap:.125rem
}
.gap-1{
    gap:.25rem
}
.gap-1\.5{
    gap:.375rem
}
.gap-10{
    gap:2.5rem
}
.gap-14{
    gap:3.5rem
}
.gap-16{
    gap:4rem
}
.gap-2{
    gap:.5rem
}
.gap-4{
    gap:1rem
}
.gap-6{
    gap:1.5rem
}
.gap-8{
    gap:2rem
}
.overflow-hidden{
    overflow:hidden
}
.overflow-x-auto{
    overflow-x:auto
}
.whitespace-nowrap{
    white-space:nowrap
}
.rounded-2xl{
    border-radius:1rem
}
.rounded-3xl{
    border-radius:1.5rem
}
.rounded-\[1\.25rem\]{
    border-radius:1.25rem
}
.rounded-full{
    border-radius:9999px
}
.rounded-lg{
    border-radius:.5rem
}
.rounded-xl{
    border-radius:.75rem
}
.border{
    border-width:1px
}
.border-4{
    border-width:4px
}
.border-l{
    border-left-width:1px
}
.border-none{
    border-style:none
}
.border-content{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-content) / var(--tw-border-opacity))
}
.border-line{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line) / var(--tw-border-opacity))
}
.border-line-dimmed{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity))
}
.border-l-line-dimmed{
    --tw-border-opacity: 1;
    border-left-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity))
}
.bg-button{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-button) / var(--tw-bg-opacity))
}
.bg-button-content{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-button-content) / var(--tw-bg-opacity))
}
.bg-button-dimmed{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-button-dimmed) / var(--tw-bg-opacity))
}
.bg-content{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-content) / var(--tw-bg-opacity))
}
.bg-intermediate{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-intermediate) / var(--tw-bg-opacity))
}
.bg-line-dimmed{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-line-dimmed) / var(--tw-bg-opacity))
}
.bg-line\/25{
    background-color:rgb(var(--color-line) / .25)
}
.bg-main{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-main) / var(--tw-bg-opacity))
}
.bg-main\/50{
    background-color:rgb(var(--color-main) / .5)
}
.bg-transparent{
    background-color:transparent
}
.bg-gradient-to-l{
    background-image:linear-gradient(to left,var(--tw-gradient-stops))
}
.bg-gradient-to-r{
    background-image:linear-gradient(to right,var(--tw-gradient-stops))
}
.bg-gradient-to-t{
    background-image:linear-gradient(to top,var(--tw-gradient-stops))
}
.from-\[\#FCFCFC\]{
    --tw-gradient-from: #FCFCFC var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(252 252 252 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-content{
    --tw-gradient-from: rgb(var(--color-content) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-content) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gradient-start{
    --tw-gradient-from: rgb(var(--color-gradient-start) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-gradient-start) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-main{
    --tw-gradient-from: rgb(var(--color-main) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-main) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.via-main{
    --tw-gradient-to: rgb(var(--color-main) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-main) / 1) var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-transparent{
    --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}
.via-80\%{
    --tw-gradient-via-position: 80%
}
.via-\[12\%\]{
    --tw-gradient-via-position: 12%
}
.to-content\/0{
    --tw-gradient-to: rgb(var(--color-content) / 0) var(--tw-gradient-to-position)
}
.to-gradient-end{
    --tw-gradient-to: rgb(var(--color-gradient-end) / 1) var(--tw-gradient-to-position)
}
.to-transparent{
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}
.bg-top{
    background-position:top
}
.object-cover{
    -o-object-fit:cover;
    object-fit:cover
}
.p-0\.5{
    padding:.125rem
}
.p-4{
    padding:1rem
}
.p-6{
    padding:1.5rem
}
.p-8{
    padding:2rem
}
.px-2{
    padding-left:.5rem;
    padding-right:.5rem
}
.px-20{
    padding-left:5rem;
    padding-right:5rem
}
.px-3{
    padding-left:.75rem;
    padding-right:.75rem
}
.px-4{
    padding-left:1rem;
    padding-right:1rem
}
.px-9{
    padding-left:2.25rem;
    padding-right:2.25rem
}
.py-1{
    padding-top:.25rem;
    padding-bottom:.25rem
}
.py-10{
    padding-top:2.5rem;
    padding-bottom:2.5rem
}
.py-2{
    padding-top:.5rem;
    padding-bottom:.5rem
}
.py-4{
    padding-top:1rem;
    padding-bottom:1rem
}
.pb-12{
    padding-bottom:3rem
}
.pr-4{
    padding-right:1rem
}
.pt-4{
    padding-top:1rem
}
.text-left{
    text-align:left
}
.text-center{
    text-align:center
}
.text-right{
    text-align:right
}
.align-super{
    vertical-align:super
}
.font-primary{
    font-family:var(--font-family-primary)
}
.font-secondary{
    font-family:var(--font-family-secondary)
}
.text-2xl{
    font-size:1.5rem;
    line-height:2rem
}
.text-4xl{
    font-size:2.25rem;
    line-height:2.5rem
}
.text-base{
    font-size:1rem;
    line-height:1.5rem
}
.text-lg{
    font-size:1.125rem;
    line-height:1.75rem
}
.text-sm{
    font-size:.875rem;
    line-height:1.25rem
}
.text-xl{
    font-size:1.25rem;
    line-height:1.75rem
}
.text-xs{
    font-size:.75rem;
    line-height:1rem
}
.font-bold{
    font-weight:700
}
.font-medium{
    font-weight:500
}
.uppercase{
    text-transform:uppercase
}
.lowercase{
    text-transform:lowercase
}
.capitalize{
    text-transform:capitalize
}
.leading-\[1\.15\]{
    line-height:1.15
}
.text-button-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-button-content) / var(--tw-text-opacity))
}
.text-button-dimmed-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-button-dimmed-content) / var(--tw-text-opacity))
}
.text-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-content) / var(--tw-text-opacity))
}
.text-content-dimmed{
    --tw-text-opacity: 1;
    color:rgb(var(--color-content-dimmed) / var(--tw-text-opacity))
}
.text-gradient-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-gradient-content) / var(--tw-text-opacity))
}
.text-info{
    --tw-text-opacity: 1;
    color:rgb(var(--color-info) / var(--tw-text-opacity))
}
.text-intermediate-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-intermediate-content) / var(--tw-text-opacity))
}
.text-main{
    --tw-text-opacity: 1;
    color:rgb(var(--color-main) / var(--tw-text-opacity))
}
.text-white{
    --tw-text-opacity: 1;
    color:rgb(255 255 255 / var(--tw-text-opacity))
}
.antialiased{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.opacity-0{
    opacity:0
}
.opacity-100{
    opacity:1
}
.opacity-15{
    opacity:.15
}
.opacity-35{
    opacity:.35
}
.opacity-5{
    opacity:.05
}
.opacity-50{
    opacity:.5
}
.shadow-\[0px_4px_6px_-2px_rgba\(0\,0\,9\,0\.03\)\,0px_12px_16px_-4px_rgba\(0\,0\,9\,0\.08\)\]{
    --tw-shadow: 0px 4px 6px -2px rgba(0,0,9,.03),0px 12px 16px -4px rgba(0,0,9,.08);
    --tw-shadow-colored: 0px 4px 6px -2px var(--tw-shadow-color), 0px 12px 16px -4px var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.outline-none{
    outline:2px solid transparent;
    outline-offset:2px
}
.outline-1{
    outline-width:1px
}
.outline-offset-2{
    outline-offset:2px
}
.outline-button{
    outline-color:rgb(var(--color-button) / 1)
}
.ring-4{
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)
}
.ring-inset{
    --tw-ring-inset: inset
}
.ring-content{
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(var(--color-content) / var(--tw-ring-opacity))
}
.blur-3xl{
    --tw-blur: blur(64px);
    filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.grayscale{
    --tw-grayscale: grayscale(100%);
    filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.filter{
    filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.transition-all{
    transition-property:all;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.transition-colors{
    transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
    transition-duration:.15s
}
.duration-300{
    transition-duration:.3s
}
.content-\[\'\'\]{
    --tw-content: "";
    content:var(--tw-content)
}
.container{
    max-width:64rem
}
.context-menu{
    position:absolute;
    right:0;
    top:100%;
    z-index:20;
    margin-top:.25rem;
    display:none;
    max-height:18rem;
    overflow:auto;
    white-space:nowrap;
    border-radius:.5rem;
    border-width:1px;
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity));
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-main) / var(--tw-bg-opacity));
    --tw-shadow: 0px 4px 6px -2px rgba(0,0,9,.03),0px 12px 16px -4px rgba(0,0,9,.08);
    --tw-shadow-colored: 0px 4px 6px -2px var(--tw-shadow-color), 0px 12px 16px -4px var(--tw-shadow-color);
    box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}
.context-menu[data-open],.group[data-open] .context-menu{
    display:block
}
.context-menu{
    min-width:8rem
}
.top{
    background-position:top;
    background-repeat:no-repeat;
    padding-top:1rem
}
@media (min-width: 768px){
    .top{
        padding-top:1.5rem
    }
}
.top{
    background-position:top -8.5rem center;
}
@media (min-width: 768px){
    @keyframes enter{
        0%{
            opacity:.3;
            --tw-grayscale: grayscale(100%);
            filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
            transform:scale(var(--scale, 1));
            grayscale:1
        }
    }
    .enter{
        --scale: .98;
        animation:enter both linear;
        animation-timeline:view(0px);
        animation-range:entry
    }
}
.money [data-type=fraction]{
    vertical-align:super;
    font-size:1rem;
    line-height:1.5rem
}
@keyframes scroll{
    0%{
        transform:translate(0)
    }
    to{
        transform:translate(calc(-100% + 1rem))
    }
}
.logo-slider{
    animation:scroll 20s linear infinite
}

/* Integration Logos Title Styling */
.integration-title {
    font-family: var(--font-family-secondary);
    font-size: 1.5rem;
    line-height: 1.3;
    font-weight: 600;
    background: linear-gradient(90deg,
        rgba(155, 13, 128, 1) 0%,
        rgba(180, 20, 150, 1) 25%,
        rgba(200, 30, 170, 1) 50%,
        rgba(220, 40, 190, 1) 75%,
        rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 1rem;
    animation: gradientShift 8s ease-in-out infinite alternate;
    background-size: 300% auto;
    position: relative;
    z-index: 2;
}

@media (min-width: 768px) {
    .integration-title {
        font-size: 1.75rem;
    }
}

/* Animation for the integration title gradient */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hover\:border-line:hover{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line) / var(--tw-border-opacity))
}
.hover\:bg-intermediate:hover{
    --tw-bg-opacity: 1;
    background-color:rgb(var(--color-intermediate) / var(--tw-bg-opacity))
}
.hover\:bg-gradient-to-br:hover{
    background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))
}
.hover\:text-content:hover{
    --tw-text-opacity: 1;
    color:rgb(var(--color-content) / var(--tw-text-opacity))
}
.hover\:text-intermediate-content:hover{
    --tw-text-opacity: 1;
    color:rgb(var(--color-intermediate-content) / var(--tw-text-opacity))
}
.hover\:underline:hover{
    text-decoration-line:underline
}
.hover\:outline-none:hover{
    outline:2px solid transparent;
    outline-offset:2px
}
.hover\:outline:hover{
    outline-style:solid
}
.focus\:border-line:focus{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line) / var(--tw-border-opacity))
}
.focus\:outline-none:focus{
    outline:2px solid transparent;
    outline-offset:2px
}
.focus\:outline:focus{
    outline-style:solid
}
.disabled\:opacity-100:disabled{
    opacity:1
}
.group:hover .group-hover\:bg-gradient-to-r{
    background-image:linear-gradient(to right,var(--tw-gradient-stops))
}
.group:hover .group-hover\:from-gradient-start{
    --tw-gradient-from: rgb(var(--color-gradient-start) / 1) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(var(--color-gradient-start) / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.group:hover .group-hover\:to-gradient-end{
    --tw-gradient-to: rgb(var(--color-gradient-end) / 1) var(--tw-gradient-to-position)
}
.group:hover .group-hover\:text-gradient-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-gradient-content) / var(--tw-text-opacity))
}
.group\/body[data-menu] .group-\[\[data-menu\]\]\/body\:block{
    display:block
}
.group\/body[data-menu] .group-\[\[data-menu\]\]\/body\:flex{
    display:flex
}
.group\/body[data-menu] .group-\[\[data-menu\]\]\/body\:hidden{
    display:none
}
.group[data-open] .group-\[\[data-open\]\]\:text-content{
    --tw-text-opacity: 1;
    color:rgb(var(--color-content) / var(--tw-text-opacity))
}
.data-\[open\]\:block[data-open],.group[data-open] .group-data-\[open\]\:block{
    display:block
}
.dark\:block:is([data-mode=dark] *){
    display:block
}
.dark\:hidden:is([data-mode=dark] *){
    display:none
}
.dark\:from-\[\#232527\]:is([data-mode=dark] *){
    --tw-gradient-from: #232527 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(35 37 39 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
@media (min-width: 768px){
    .md\:relative{
        position:relative
    }
    .md\:order-1{
        order:1
    }
    .md\:order-2{
        order:2
    }
    .md\:col-span-2{
        grid-column:span 2 / span 2
    }
    .md\:-m-6{
        margin:-1.5rem
    }
    .md\:my-20{
        margin-top:5rem;
        margin-bottom:5rem
    }
    .md\:-mr-\[calc\(\(100\%-1\.5rem\)\/2\+1\.5rem\)\]{
        margin-right:calc(((100% - 1.5rem)/2 + 1.5rem)*-1)
    }
    .md\:-mr-\[calc\(\(100\%-1rem\)\/2\)\]{
        margin-right:calc((100% - 1rem)/2*-1)
    }
    .md\:mb-20{
        margin-bottom:5rem
    }
    .md\:ml-0{
        margin-left:0
    }
    .md\:block{
        display:block
    }
    .md\:flex{
        display:flex
    }
    .md\:inline-flex{
        display:inline-flex
    }
    .md\:grid{
        display:grid
    }
    .md\:hidden{
        display:none
    }
    .md\:size-14{
        width:3.5rem;
        height:3.5rem
    }
    .md\:size-20{
        width:5rem;
        height:5rem
    }
    .md\:h-14{
        height:3.5rem
    }
    .md\:h-\[412px\]{
        height:412px
    }
    .md\:w-\[412px\]{
        width:412px
    }
    .md\:w-full{
        width:100%
    }
    .md\:max-w-\[140px\]{
        max-width:140px
    }
    .md\:max-w-\[calc\(\(100\%-1\.5rem\)\/2\)\]{
        max-width:calc((100% - 1.5rem)/2)
    }
    .md\:max-w-md{
        max-width:28rem
    }
    .md\:max-w-none{
        max-width:none
    }
    .md\:scale-100{
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }
    .md\:grid-cols-1{
        grid-template-columns:repeat(1,minmax(0,1fr))
    }
    .md\:grid-cols-2{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .md\:grid-cols-3{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .md\:flex-row{
        flex-direction:row
    }
    .md\:flex-col{
        flex-direction:column
    }
    .md\:flex-wrap{
        flex-wrap:wrap
    }
    .md\:place-content-start{
        place-content:start
    }
    .md\:items-start{
        align-items:flex-start
    }
    .md\:items-end{
        align-items:flex-end
    }
    .md\:items-center{
        align-items:center
    }
    .md\:justify-center{
        justify-content:center
    }
    .md\:justify-between{
        justify-content:space-between
    }
    .md\:gap-10{
        gap:2.5rem
    }
    .md\:gap-12{
        gap:3rem
    }
    .md\:gap-14{
        gap:3.5rem
    }
    .md\:gap-16{
        gap:4rem
    }
    .md\:gap-2{
        gap:.5rem
    }
    .md\:gap-20{
        gap:5rem
    }
    .md\:gap-32{
        gap:8rem
    }
    .md\:gap-4{
        gap:1rem
    }
    .md\:gap-6{
        gap:1.5rem
    }
    .md\:gap-8{
        gap:2rem
    }
    .md\:overflow-visible{
        overflow:visible
    }
    .md\:rounded-2xl{
        border-radius:1rem
    }
    .md\:rounded-3xl{
        border-radius:1.5rem
    }
    .md\:rounded-\[1\.75rem\]{
        border-radius:1.75rem
    }
    .md\:border-none{
        border-style:none
    }
    .md\:bg-button\/10{
        background-color:rgb(var(--color-button) / .1)
    }
    .md\:bg-gradient-to-r{
        background-image:linear-gradient(to right,var(--tw-gradient-stops))
    }
    .md\:via-20\%{
        --tw-gradient-via-position: 20%
    }
    .md\:p-0\.5{
        padding:.125rem
    }
    .md\:p-16{
        padding:4rem
    }
    .md\:p-6{
        padding:1.5rem
    }
    .md\:px-6{
        padding-left:1.5rem;
        padding-right:1.5rem
    }
    .md\:px-9{
        padding-left:2.25rem;
        padding-right:2.25rem
    }
    .md\:py-0{
        padding-top:0;
        padding-bottom:0
    }
    .md\:py-20{
        padding-top:5rem;
        padding-bottom:5rem
    }
    .md\:pt-6{
        padding-top:1.5rem
    }
    .md\:text-left{
        text-align:left
    }
    .md\:text-2xl{
        font-size:1.5rem;
        line-height:2rem
    }
    .md\:text-4xl{
        font-size:2.25rem;
        line-height:2.5rem
    }
    .md\:text-5xl{
        font-size:3rem;
        line-height:1
    }
    .md\:text-base{
        font-size:1rem;
        line-height:1.5rem
    }
    .md\:text-lg{
        font-size:1.125rem;
        line-height:1.75rem
    }
    .md\:opacity-100{
        opacity:1
    }
}
.\[\&_\>div\:only-of-type\]\:max-w-full>div:only-of-type{
    max-width:100%
}
@media (min-width: 768px){
    .md\:\[\&_\>div\:only-of-type\]\:max-w-\[calc\(100\%\/3-1rem\)\]>div:only-of-type{
        max-width:calc(100% / 3 - 1rem)
    }
}
.\[\&_\>div\]\:w-full>div{
    width:100%
}
.\[\&_\>div\]\:max-w-xs>div{
    max-width:20rem
}
.\[\&_\>div\]\:shrink-0>div{
    flex-shrink:0
}
@media (min-width: 768px){
    .md\:\[\&_\>div\]\:max-w-\[calc\(100\%\/3-1rem\)\]>div{
        max-width:calc(100% / 3 - 1rem)
    }
}
.\[\&_td\]\:border-line-dimmed td{
    --tw-border-opacity: 1;
    border-color:rgb(var(--color-line-dimmed) / var(--tw-border-opacity))
}
.\[\&_td\]\:py-2 td{
    padding-top:.5rem;
    padding-bottom:.5rem
}
.\[\&_tr\:not\(\:last-child\)_td\]\:border-b tr:not(:last-child) td{
    border-bottom-width:1px
}

/* AI Crypto Card Styles */
.crypto-card {
    background-color: #0F0C04;
    border: 2px solid rgba(234, 179, 8, 0.5);
}

.crypto-card-badge {
    background-color: #D69822;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.crypto-card-tag {
    display: inline-block;
    padding: 6px 14px;
    font-size: 0.75rem;
    background-color: rgba(214, 152, 34, 0.15);
    border-radius: 20px;
    border: 1px solid rgba(214, 152, 34, 0.3);
    color: white;
    white-space: nowrap;
}

.crypto-card-button {
    padding: 10px 18px;
    font-size: 0.875rem;
    white-space: nowrap;
    background: linear-gradient(to right, #D69822, #F5AE2D);
    box-shadow: 0 8px 12px -2px rgba(214, 152, 34, 0.25);
    transition: all 0.3s ease;
    border: 1px solid rgba(214, 152, 34, 0.5);
    color: white;
    font-weight: bold;
}

.crypto-card-mobile-spacing {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .crypto-card-mobile-spacing {
        margin-top: 60px;
        margin-bottom: 60px;
    }
}

.crypto-card-title {
    line-height: 1.2;
}

.crypto-card-description {
    margin-bottom: 16px;
    line-height: 1.5;
    max-width: 700px;
}

.crypto-card-tags {
    gap: 8px;
    margin-bottom: 8px;
}

.crypto-card-button-content {
    gap: 0.3rem;
}

.crypto-card-button-icon {
    font-size: 0.875rem;
}

.crypto-card-flex-container {
    gap: 1rem;
}

/* AI Agents Flow Card Styles */
.flow-card {
    background-color: #0d020b;
    border: 2px solid rgba(155, 13, 128, 0.6);
}

.flow-card-content {
    padding-top: 30px;
    padding-bottom: 30px;
}

.flow-card-badge {
    background-color: rgb(155, 13, 128);
    margin-bottom: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.flow-card-title {
    margin-bottom: 20px;
}

.flow-card-description {
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.9);
}

.flow-card-tags-container {
    margin-bottom: 24px;
}

.flow-card-tag {
    padding: 6px 12px;
    font-size: 0.75rem;
    background-color: rgba(155, 13, 128, 0.15);
    border-radius: 0.5rem;
    border: 1px solid rgba(155, 13, 128, 0.4);
    color: white;
    margin: 0 2px;
}

.flow-card-image-container {
    margin-bottom: 24px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    background-color: rgba(17, 10, 30, 0.95);
    border: 1px solid rgba(155, 13, 128, 0.3);
}

.flow-card-button {
    background-color: rgb(155, 13, 128);
    padding: 14px 32px;
    font-size: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.flow-card-button-icon {
    margin-left: 8px;
    font-size: 1.125rem;
}

/* Presets Card Styles */
.presets-card-dark-bg {
    background-color: rgb(41 0 33);
    border-color: #96006f;
}

.presets-card-dark-bg h3 {
    color: white;
}

.presets-card-dark-bg p {
    color: rgba(255, 255, 255, 0.85);
}

.presets-card-dark-bg .badge {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* Price Comparison Section Styles */
.price-comparison-section {
    padding: 6rem 0;
    background: linear-gradient(to bottom, #0D0D0D, rgba(155, 13, 128, 0.15), #0D0D0D);
    background-image: radial-gradient(circle at 50% 20%, rgba(155, 13, 128, 0.25) 0%, transparent 60%);
    position: relative;
    overflow: hidden;
}

.price-comparison-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.5), rgba(246, 59, 199, 0.7) 50%, rgba(155, 13, 128, 0.5));
}

.price-comparison-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.3), rgba(155, 13, 128, 0.6), rgba(155, 13, 128, 0.3));
}

.price-comparison-title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: rgb(155, 13, 128);
    text-shadow: 0 0 20px rgba(155, 13, 128, 0.4);
    position: relative;
    display: inline-block;
}

.price-comparison-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.3), rgba(155, 13, 128, 0.8), rgba(155, 13, 128, 0.3));
    transform: translateX(-50%);
    border-radius: 3px;
}

.price-comparison-subtitle {
    text-align: center;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.6;
}

.price-comparison-subtitle strong {
    color: rgb(155, 13, 128);
    font-weight: 700;
}

.price-comparison-section strong {
    color: rgb(155, 13, 128);
    font-weight: 700;
}

.price-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    background: #000;
    border: 1px solid rgba(155, 13, 128, 0.2);
    margin-bottom: 1.5rem;
}

.price-comparison-table th,
.price-comparison-table td {
    padding: 1.25rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.price-comparison-table th {
    background: linear-gradient(to right, #0A0A0A, rgb(155, 13, 128, 0.15));
    font-weight: 600;
}

.price-comparison-table tr:hover:not(.hubtool-row) {
    background-color: rgba(255, 255, 255, 0.03);
}

.price-comparison-table tr:last-child td {
    border-bottom: none;
}

.price-comparison-table td.price {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.price-comparison-table tr.hubtool-row {
    background: linear-gradient(to right, rgba(155, 13, 128, 0.1), rgba(155, 13, 128, 0.2));
    transform: scale(1.01);
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-left: 3px solid rgb(155, 13, 128);
    transition: all 0.3s ease;
}

.price-comparison-table tr.hubtool-row:hover {
    background: linear-gradient(to right, rgba(155, 13, 128, 0.15), rgba(155, 13, 128, 0.25));
    transform: scale(1.015);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.price-comparison-table td.hubtool-price {
    font-weight: 800;
    color: rgb(155, 13, 128);
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(155, 13, 128, 0.3);
}

.price-comparison-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
}

.price-comparison-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(to right, rgb(155, 13, 128), rgba(155, 13, 128, 0.8));
    color: white;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.05em;
}

/* Estilos para o carrossel de logos */
.price-comparison-section .logo-slider {
    animation: scroll 40s linear infinite;
    padding: 1.5rem 0;
}

.price-comparison-section .logo-slider:hover {
    animation-play-state: paused;
}

@keyframes hubtool-glow {
    0% {
        box-shadow: 0 0 30px rgba(155, 13, 128, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(155, 13, 128, 0.35);
    }
    100% {
        box-shadow: 0 0 30px rgba(155, 13, 128, 0.2);
    }
}

.price-comparison-logo-container {
    position: relative;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.12), rgba(155, 13, 128, 0.05), rgba(155, 13, 128, 0.12));
    border-radius: 1rem;
    padding: 0.5rem 0;
    box-shadow: 0 0 30px rgba(155, 13, 128, 0.2);
    overflow: hidden;
    animation: hubtool-glow 5s infinite ease-in-out;
}

.price-comparison-logo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(155, 13, 128, 0.5), transparent);
}

.price-comparison-logo-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(155, 13, 128, 0.5), transparent);
}

.price-comparison-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem;
    min-width: 8rem;
    padding: 0 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.price-comparison-logo-item:hover {
    transform: translateY(-5px) scale(1.1);
}

.price-comparison-logo-item:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: rgba(155, 13, 128, 0.8);
    border-radius: 3px;
    box-shadow: 0 0 10px 2px rgba(155, 13, 128, 0.6);
}

.price-comparison-logo {
    height: 3rem;
    opacity: 0.6;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.price-comparison-logo-item:hover .price-comparison-logo {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(155, 13, 128, 0.8));
}

.price-comparison-section .avatar {
    opacity: 0.7;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.price-comparison-logo-item:hover .avatar {
    opacity: 1;
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(155, 13, 128, 0.8));
}

.price-comparison-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Animação para o botão CTA */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(155, 13, 128, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(155, 13, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(155, 13, 128, 0);
    }
}

.price-comparison-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(to right, rgb(155, 13, 128), rgba(155, 13, 128, 0.9));
    color: white;
    font-weight: 600;
    border-radius: 2rem;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(155, 13, 128, 0.3);
    animation: pulse-glow 2s infinite;
}

.price-comparison-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(155, 13, 128, 0.4);
    background: linear-gradient(to right, rgb(155, 13, 128), rgb(180, 20, 150));
}

.price-comparison-cta-button i {
    font-size: 1.125rem;
    transition: transform 0.2s ease;
}

.price-comparison-cta-button:hover i {
    transform: translateX(4px);
}

.price-comparison-cta-subtext {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.price-comparison-cta-subtext strong {
    color: rgb(155, 13, 128);
}

@media (max-width: 768px) {
    .price-comparison-table {
        font-size: 0.875rem;
    }

    .price-comparison-table th,
    .price-comparison-table td {
        padding: 1rem;
    }

    .price-comparison-logo-item {
        min-width: 6rem;
        height: 3rem;
    }

    .price-comparison-logo {
        height: 2rem;
    }

    .price-comparison-title {
        font-size: 2rem;
    }
}

/* Adding custom-colored scrollbar for webkit browsers */
.price-comparison-section ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.price-comparison-section ::-webkit-scrollbar-track {
    background: rgba(155, 13, 128, 0.05);
    border-radius: 10px;
}

.price-comparison-section ::-webkit-scrollbar-thumb {
    background: rgba(155, 13, 128, 0.3);
    border-radius: 10px;
}

.price-comparison-section ::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 13, 128, 0.5);
}

/* Hero Section Enhanced Styles */
.hero-title-container {
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-family-secondary);
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    background: linear-gradient(90deg,
        rgba(155, 13, 128, 1) 0%,
        rgba(180, 20, 150, 1) 25%,
        rgba(200, 30, 170, 1) 50%,
        rgba(220, 40, 190, 1) 75%,
        rgba(255, 255, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-bottom: 0.5rem;
    animation: fadeInUp 0.8s ease-out, gradientShift 8s ease-in-out infinite alternate;
    background-size: 300% auto;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-title-line {
    display: block;
}

.hero-title-highlight {
    position: relative;
    display: inline-block;
    font-weight: 800;
    color: rgb(155, 13, 128);
    -webkit-text-fill-color: rgb(155, 13, 128);
}

.hero-title-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.7), rgba(155, 13, 128, 0.3));
    border-radius: 2px;
    animation: slideInRight 0.8s ease-out 0.5s forwards;
    transform: scaleX(0);
    transform-origin: left;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 540px;
    animation: fadeInUp 0.8s ease-out 0.3s both;
    position: relative;
    line-height: 1.6;
}

.hero-keyword {
    color: #ffffff;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 3px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.1), rgba(155, 13, 128, 0.2), rgba(155, 13, 128, 0.1));
    border-radius: 3px;
}

.hero-cta {
    animation: fadeInUp 0.8s ease-out 0.6s both;
    box-shadow: 0 4px 20px -5px rgba(155, 13, 128, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px -5px rgba(155, 13, 128, 0.65);
}

.hero-glow {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, rgba(155, 13, 128, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
        text-align: left;
    }

    .hero-subtitle {
        font-size: 1.25rem;
        text-align: left;
    }
}

.hero-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.hero-shape-1 {
    width: 200px;
    height: 200px;
    top: 15%;
    right: 10%;
    background: linear-gradient(45deg, rgba(155, 13, 128, 0.2), rgba(155, 13, 128, 0.4));
    border: 1px solid rgba(155, 13, 128, 0.3);
    filter: blur(15px);
    animation: floatAnimation 8s ease-in-out infinite;
}

.hero-shape-2 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 5%;
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.2), rgba(59, 130, 246, 0.3));
    border: 1px solid rgba(155, 13, 128, 0.2);
    filter: blur(12px);
    animation: floatAnimation 12s ease-in-out infinite reverse;
}

.hero-shape-3 {
    width: 100px;
    height: 100px;
    top: 55%;
    right: 20%;
    background: linear-gradient(225deg, rgba(155, 13, 128, 0.1), rgba(220, 40, 190, 0.2));
    border: 1px solid rgba(155, 13, 128, 0.15);
    filter: blur(8px);
    animation: floatAnimation 10s ease-in-out 2s infinite;
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Steps/How it works Section Styles */
.steps-title {
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    min-height: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.steps-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, rgba(155, 13, 128, 0.3), rgba(155, 13, 128, 0.8), rgba(155, 13, 128, 0.3));
    border-radius: 3px;
}

.step-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #050505;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(155, 13, 128, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out both;
}

.provider-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: #050505;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(155, 13, 128, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out both;
}

.step-card:nth-child(1) {
    animation-delay: 0.1s;
}

.provider-card:nth-child(1) {
    animation-delay: 0.2s;
}

.step-card:nth-child(2) {
    animation-delay: 0.3s;
}

.provider-card:nth-child(2) {
    animation-delay: 0.4s;
}

.step-card:nth-child(3) {
    animation-delay: 0.5s;
}

.provider-card:nth-child(3) {
    animation-delay: 0.6s;
}

.step-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.provider-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(155, 13, 128, 0.5) !important;
}

.provider-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(155, 13, 128, 0.5) !important;
}

.step-card:hover::before {
    opacity: 1;
}

.provider-card:hover::before {
    opacity: 1;
}

.step-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.3), rgba(155, 13, 128, 0.15));
    border: 1px solid rgba(155, 13, 128, 0.25);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.provider-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.3), rgba(155, 13, 128, 0.15));
    border: 1px solid rgba(155, 13, 128, 0.25);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.step-card:hover .step-icon-container {
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.6), rgba(155, 13, 128, 0.4));
    box-shadow: 0 0 25px rgba(155, 13, 128, 0.25);
}

.provider-card:hover .provider-icon-container {
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.6), rgba(155, 13, 128, 0.4));
    box-shadow: 0 0 25px rgba(155, 13, 128, 0.25);
}

.step-icon {
    font-size: 32px;
    color: rgb(155, 13, 128);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.provider-icon {
    font-size: 32px;
    color: rgba(155, 13, 128, 0.9);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.step-card:hover .step-icon {
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 10px rgba(155, 13, 128, 0.5);
}

.provider-card:hover .provider-icon {
    transform: scale(1.1);
    color: #fff;
    text-shadow: 0 0 10px rgba(155, 13, 128, 0.5);
}

.step-heading {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #f0f0f0;
    transition: color 0.3s ease;
}

.provider-heading {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #f0f0f0;
    transition: color 0.3s ease;
}

.step-card:hover .step-heading {
    color: rgb(155, 13, 128);
}

.provider-card:hover .provider-heading {
    color: rgb(155, 13, 128);
}

.step-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.95rem;
}

.provider-description {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-size: 0.95rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .step-icon-container,
    .provider-icon-container {
        width: 60px;
        height: 60px;
    }

    .step-icon,
    .provider-icon {
        font-size: 24px;
    }

    .step-heading,
    .provider-heading {
        font-size: 1.1rem;
    }
}

/* Additional styles for the How it works section */
#product {
    padding: 4rem 0;
    position: relative;
    z-index: 1;
    background-color: #000000;
}

#product::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

.badge {
    background: linear-gradient(90deg, rgba(155, 13, 128, 0.2), rgba(155, 13, 128, 0.3));
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(155, 13, 128, 0.2);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    background: linear-gradient(90deg, rgba(155, 13, 128, 0.4), rgba(155, 13, 128, 0.5));
}

/* Improved animation timing */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    70% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Increased spacing between sections */
.mt-8 {
    margin-top: 3rem !important;
}

@media (max-width: 768px) {
    #product {
        padding: 2rem 0;
    }

    .mt-8 {
        margin-top: 2rem !important;
    }

    /* Mobile padding fix for step-card and provider-card */
    .step-card, .provider-card {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
        margin-bottom: 1rem;
    }

    /* Mobile grid container padding */
    #product .grid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Ensure full width on mobile */
    #product .container {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }

    /* Improve text layout on mobile */
    .step-description, .provider-description {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .step-heading, .provider-heading {
        font-size: 1.25rem !important;
    }

    /* Adjust icon sizing and alignment for mobile */
    .step-icon-container, .provider-icon-container {
        min-width: 3rem;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .step-icon, .provider-icon {
        font-size: 1.5rem !important;
    }

    /* Improve section headings on mobile */
    #product h3 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-bottom: 1.5rem;
    }

    #product .badge {
        margin-bottom: 0.75rem;
    }

    /* Add extra space between sections */
    #product .flex.flex-col.gap-2.items-center.text-center {
        margin-bottom: 1rem;
        margin-top: 2rem;
    }

    /* Adjust first section spacing */
    #product .flex.flex-col.gap-2.items-center.text-center:first-of-type {
        margin-top: 0;
    }
}

/* Pulse animation for icons */
@keyframes pulse-icon {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.step-icon-container, .provider-icon-container {
    position: relative;
}

.step-icon-container::after, .provider-icon-container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: inherit;
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
}

.step-card:hover .step-icon-container::after {
    opacity: 0.5;
    animation: pulse-icon 2s infinite;
    box-shadow: 0 0 15px rgba(155, 13, 128, 0.3);
}

.provider-card:hover .provider-icon-container::after {
    opacity: 0.5;
    animation: pulse-icon 2s infinite;
    box-shadow: 0 0 15px rgba(155, 13, 128, 0.3);
}

/* Add delighful details */
.step-card, .provider-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.title-pink.steps-title {
    position: relative;
    display: inline-block;
    min-height: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.title-pink.steps-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
        rgba(155, 13, 128, 0.1),
        rgba(155, 13, 128, 0.7) 50%,
        rgba(155, 13, 128, 0.1)
    );
    border-radius: 2px;
}

/* Features Section Styles */
#features {
    background-color: #000000;
    padding: 4rem 0;
    position: relative;
    z-index: 1;
}

#features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
    z-index: -1;
}

#features h2 {
    color: #fff;
    position: relative;
    display: inline-block;
}

#features h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right,
        rgba(155, 13, 128, 0.1),
        rgba(155, 13, 128, 0.7) 50%,
        rgba(155, 13, 128, 0.1)
    );
    border-radius: 2px;
}

#features .border-line {
    background: #050505;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(155, 13, 128, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#features .border-line:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(155, 13, 128, 0.5) !important;
}

#features .border-line::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

#features .border-line:hover::before {
    opacity: 1;
}

#features .title-pink {
    color: rgb(155, 13, 128);
    transition: color 0.3s ease;
}

#features p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

#features .avatar.button {
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.2), rgba(155, 13, 128, 0.1));
    border: 1px solid rgba(155, 13, 128, 0.2);
    color: rgb(155, 13, 128);
    transition: all 0.3s ease;
}

#features .avatar.button:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(155, 13, 128, 0.5), rgba(155, 13, 128, 0.3));
    box-shadow: 0 0 20px rgba(155, 13, 128, 0.2);
    color: #fff;
    transform: translateY(-2px);
}

#features .avatar.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#features .avatar.button i {
    color: inherit;
}

#features .feature-card {
    position: relative;
    overflow: hidden;
    background: #050505;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(155, 13, 128, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#features .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(155, 13, 128, 0.5) !important;
}

#features .feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

#features .feature-card:hover::before {
    opacity: 1;
}

#features .feature-heading {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #f0f0f0;
    transition: color 0.3s ease;
}

#features .feature-card:hover .feature-heading {
    color: rgb(155, 13, 128);
    text-shadow: 0 0 10px rgba(155, 13, 128, 0.3);
}

#features .feature-description {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    #features {
        padding: 2rem 0;
    }

    #features .feature-heading {
        font-size: 1.1rem;
    }
}

/* Add animation for feature cards */
@keyframes featureGlow {
    0% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 0 8px 25px rgba(155, 13, 128, 0.2);
    }
    100% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
}

#features .feature-card {
    animation: featureGlow 3s infinite;
    animation-delay: calc(var(--index, 0) * 0.5s);
}

/* Popular Plan Enhanced Styling */
.popular-plan {
    position: relative;
    overflow: visible;
    border: 2px solid rgba(155, 13, 128, 0.6) !important;
    box-shadow: 0 15px 30px -5px rgba(155, 13, 128, 0.25);
    background: linear-gradient(to bottom, rgba(20, 8, 20, 0.95), rgba(15, 5, 15, 0.9)) !important;
    animation: planPulse 4s ease-in-out infinite;
    margin-top: 15px;
    padding-top: 25px !important;
}

@keyframes planPulse {
    0% {
        box-shadow: 0 15px 30px -5px rgba(155, 13, 128, 0.25);
    }
    50% {
        box-shadow: 0 15px 30px -2px rgba(155, 13, 128, 0.4);
    }
    100% {
        box-shadow: 0 15px 30px -5px rgba(155, 13, 128, 0.25);
    }
}

.popular-plan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(155, 13, 128, 0.3) 1px, transparent 1px),
        radial-gradient(circle, rgba(155, 13, 128, 0.25) 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.4;
    z-index: -1;
}

.popular-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: linear-gradient(90deg,
        rgba(155, 13, 128, 1) 0%,
        rgba(180, 20, 150, 1) 25%,
        rgba(200, 30, 170, 1) 50%,
        rgba(220, 40, 190, 1) 75%,
        rgba(255, 255, 255, 1) 100%);
    color: white;
    font-weight: 700;
    padding: 0.3rem 1.2rem;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 0 15px 0px rgba(155, 13, 128, 0.5);
    z-index: 20;
    animation: badgeGlow 3s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    from {
        box-shadow: 0 0 10px 0px rgba(155, 13, 128, 0.5);
    }
    to {
        box-shadow: 0 0 20px 5px rgba(155, 13, 128, 0.7);
    }
}

.popular-plan .button {
    background: linear-gradient(90deg,
        rgba(155, 13, 128, 1) 0%,
        rgba(220, 40, 190, 1) 100%) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 15px 0px rgba(155, 13, 128, 0.5);
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    letter-spacing: 0.02em;
}

.popular-plan .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 2px rgba(155, 13, 128, 0.7);
}

.popular-plan h3 {
    background: linear-gradient(90deg,
        rgba(155, 13, 128, 1) 0%,
        rgba(220, 40, 190, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}

.popular-plan .money {
    color: rgb(220, 40, 190) !important;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(155, 13, 128, 0.3);
}

.popular-plan p span i {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(155, 13, 128, 0.8));
}

@media (max-width: 768px) {
    .popular-plan {
        margin-top: 15px;
        padding-top: 25px !important;
    }

    .popular-plan-badge {
        top: 10px;
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
    }
}

/* Plans Grid Layout */
.plans-grid {
    display: flex;
    position: relative;
}

@media (min-width: 768px) {
    .plans-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* This ensures the popular plan is visually in the middle when there are 3 plans */
    .plans-grid > div:nth-child(3n-1) .popular-plan {
        order: 2;
    }

    .plans-grid > div:nth-child(3n) .popular-plan {
        order: 3;
    }

    .plans-grid > div:nth-child(3n-2) .popular-plan {
        order: 1;
    }
}

/* Free Plan Enhanced Styling */
.free-plan-card, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 2px solid rgba(13, 155, 128, 0.6) !important;
    box-shadow: 0 10px 25px -5px rgba(13, 155, 128, 0.2);
    background: linear-gradient(to bottom, rgba(13, 25, 23, 0.95), rgba(8, 15, 14, 0.9)) !important;
    animation: freePlanPulse 4s ease-in-out infinite;
}

@keyframes freePlanPulse {
    0% {
        box-shadow: 0 10px 25px -5px rgba(13, 155, 128, 0.2);
    }
    50% {
        box-shadow: 0 10px 25px -2px rgba(13, 155, 128, 0.35);
    }
    100% {
        box-shadow: 0 10px 25px -5px rgba(13, 155, 128, 0.2);
    }
}

.free-plan-card::before, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(13, 155, 128, 0.2) 1px, transparent 1px),
        radial-gradient(circle, rgba(13, 155, 128, 0.15) 1px, transparent 1px);
    background-size: 20px 20px, 30px 30px;
    background-position: 0 0, 15px 15px;
    opacity: 0.3;
    z-index: -1;
}

.free-plan-card::after, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line::after {
    content: 'Free';
    position: absolute;
    top: 10px;
    right: 20px;
    background: linear-gradient(90deg,
        rgba(13, 155, 128, 1) 0%,
        rgba(30, 200, 170, 1) 100%);
    color: white;
    font-weight: 600;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    box-shadow: 0 0 15px 0px rgba(13, 155, 128, 0.5);
    z-index: 20;
    animation: freeGlow 3s ease-in-out infinite alternate;
    transform: rotate(-2deg);
}

@keyframes freeGlow {
    from {
        box-shadow: 0 0 10px 0px rgba(13, 155, 128, 0.5);
    }
    to {
        box-shadow: 0 0 20px 5px rgba(13, 155, 128, 0.7);
    }
}

.free-plan-card p span i {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 8px rgba(13, 155, 128, 0.8));
}

.free-plan-card .md\:rounded-3xl.md\:bg-main::before,
.flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line .md\:rounded-3xl.md\:bg-main::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(13, 155, 128, 0.08) 30%,
        rgba(13, 155, 128, 0.15) 40%,
        transparent 50%
    );
    transform: rotate(45deg);
    animation: shimmer 3s linear infinite;
    z-index: 0;
}

.free-plan-button, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line .button {
    background: linear-gradient(90deg,
        rgba(13, 155, 128, 1) 0%,
        rgba(30, 200, 170, 1) 100%) !important;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 15px 0px rgba(13, 155, 128, 0.5);
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    letter-spacing: 0.02em;
}

.free-plan-button:hover, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 2px rgba(13, 155, 128, 0.7);
}

/* Add a special pulsing border effect */
.free-plan-card, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line {
    position: relative;
}

@media (max-width: 768px) {
    .free-plan-card, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line {
        margin-top: 0;
        padding-top: 25px !important;
    }

    .free-plan-card::after, .flex.flex-col.gap-4.p-4.rounded-2xl.border.md\:p-6.md\:gap-6.md\:items-center.md\:flex-row.md\:justify-between.md\:rounded-3xl.border-line::after {
        top: 10px;
        left: auto;
        right: 20px;
        transform: rotate(-2deg);
    }
}