/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme{
    :root,:host{
        --font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing:.25rem;
        --default-font-family:var(--font-sans);
        --default-mono-font-family:var(--font-mono)
    }
}
@layer base{
    *,:after,:before,::backdrop{
        box-sizing:border-box;
        border:0 solid;
        margin:0;
        padding:0
    }
    ::file-selector-button{
        box-sizing:border-box;
        border:0 solid;
        margin:0;
        padding:0
    }
    html,:host{
        -webkit-text-size-adjust:100%;
        tab-size:4;
        line-height:1.5;
        font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings:var(--default-font-feature-settings,normal);
        font-variation-settings:var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color:transparent
    }
    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;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        text-decoration:inherit
    }
    b,strong{
        font-weight:bolder
    }
    code,kbd,samp,pre{
        font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings:var(--default-mono-font-feature-settings,normal);
        font-variation-settings:var(--default-mono-font-variation-settings,normal);
        font-size:1em
    }
    small{
        font-size:80%
    }
    sub,sup{
        vertical-align:baseline;
        font-size:75%;
        line-height:0;
        position:relative
    }
    sub{
        bottom:-.25em
    }
    sup{
        top:-.5em
    }
    table{
        text-indent:0;
        border-color:inherit;
        border-collapse:collapse
    }
    :-moz-focusring{
        outline:auto
    }
    progress{
        vertical-align:baseline
    }
    summary{
        display:list-item
    }
    ol,ul,menu{
        list-style:none
    }
    img,svg,video,canvas,audio,iframe,embed,object{
        vertical-align:middle;
        display:block
    }
    img,video{
        max-width:100%;
        height:auto
    }
    button,input,select,optgroup,textarea{
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    ::file-selector-button{
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    :where(select:is([multiple],[size])) optgroup{
        font-weight:bolder
    }
    :where(select:is([multiple],[size])) optgroup option{
        padding-inline-start:20px
    }
    ::file-selector-button{
        margin-inline-end:4px
    }
    ::placeholder{
        opacity:1
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){
        ::placeholder{
            color:currentColor
        }
        @supports (color:color-mix(in lab, red, red)){
            ::placeholder{
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }
    textarea{
        resize:vertical
    }
    ::-webkit-search-decoration{
        -webkit-appearance:none
    }
    ::-webkit-date-and-time-value{
        min-height:1lh;
        text-align:inherit
    }
    ::-webkit-datetime-edit{
        display:inline-flex
    }
    ::-webkit-datetime-edit-fields-wrapper{
        padding:0
    }
    ::-webkit-datetime-edit{
        padding-block:0
    }
    ::-webkit-datetime-edit-year-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-month-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-day-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-hour-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-minute-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-second-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-millisecond-field{
        padding-block:0
    }
    ::-webkit-datetime-edit-meridiem-field{
        padding-block:0
    }
    ::-webkit-calendar-picker-indicator{
        line-height:1
    }
    :-moz-ui-invalid{
        box-shadow:none
    }
    button,input:where([type=button],[type=reset],[type=submit]){
        appearance:button
    }
    ::file-selector-button{
        appearance:button
    }
    ::-webkit-inner-spin-button{
        height:auto
    }
    ::-webkit-outer-spin-button{
        height:auto
    }
    [hidden]:where(:not([hidden=until-found])){
        display:none!important
    }
}
@layer components;
@layer utilities{
    .visible{
        visibility:visible
    }
    .relative{
        position:relative
    }
    .start{
        inset-inline-start:var(--spacing)
    }
    .hidden{
        display:none
    }
    .table{
        display:table
    }
}
:root{
    --dark:#000205;
    --blue:#087cff;
    --cyan:#20e8ff;
    --ink:#000205;
    --muted:#647384;
    --soft:#f1f7fb
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    overflow-x:hidden
}
body{
    color:var(--ink);
    margin:0;
    font-family:Arial,sans-serif;
    overflow-x:hidden
}
a{
    color:inherit;
    text-decoration:none
}
svg{
    width:1.4em
}
.dark{
    color:#fff;
    background:#020712
}
.light{
    background:#fff
}
.tag{
    color:#0874e7;
    letter-spacing:.15em;
    margin-bottom:18px;
    font-size:11px;
    font-weight:900;
    display:block
}
.cyan{
    color:var(--cyan)
}
em{
    font-family:Georgia,serif;
    font-weight:400
}
header{
    z-index:20;
    -webkit-backdrop-filter:blur(17px);
    backdrop-filter:blur(17px);
    color:#fff;
    background:#06112699;
    border:1px solid #ffffff24;
    border-radius:18px;
    justify-content:space-between;
    align-items:center;
    width:min(1180px,100% - 32px);
    height:74px;
    padding:0 12px 0 19px;
    display:flex;
    position:absolute;
    top:18px;
    left:50%;
    transform:translate(-50%)
}
.brand,.footer-brand{
    letter-spacing:.08em;
    align-items:center;
    gap:8px;
    font-size:13px;
    display:flex
}
.brand img,.footer-brand img{
    object-fit:contain;
    width:30px;
    height:34px
}
.brand b,.footer-brand b{
    color:var(--cyan)
}
nav{
    color:#c9d9e8;
    gap:28px;
    font-size:12px;
    display:flex
}
nav a:hover{
    color:var(--cyan)
}
.head-cta,.dark-btn{
    color:var(--ink);
    background:#fff;
    border-radius:12px;
    align-items:center;
    gap:7px;
    padding:13px 17px;
    font-size:12px;
    font-weight:800;
    display:flex
}
.head-cta svg{
    color:#10bd51
}
.hero{
    isolation:isolate;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:35px;
    min-height:800px;
    padding:165px max(6vw,24px) 75px;
    display:grid;
    position:relative;
    overflow:hidden
}
.hero:before,.markets:before,.video:before{
    content:"";
    z-index:-1;
    background-image:linear-gradient(#31dfff0a 1px,#0000 1px),linear-gradient(90deg,#31dfff0a 1px,#0000 1px),radial-gradient(circle at 82% 45%,#086aff80,#0000 34%);
    background-size:54px 54px,54px 54px,auto;
    position:absolute;
    inset:0
}
.ticker{
    color:#748da2;
    justify-content:center;
    gap:55px;
    width:100%;
    font:10px monospace;
    display:flex;
    position:absolute;
    top:111px
}
.ticker b{
    color:#31ec95
}
.hero-copy{
    max-width:710px
}
h1{
    letter-spacing:-.055em;
    margin:22px 0;
    font-size:clamp(44px,5.3vw,82px);
    line-height:.97
}
h1 em,.dark h2 em{
    color:var(--cyan)
}
.hero-copy>p{
    color:#a8bdcf;
    max-width:640px;
    font-size:clamp(15px,1.4vw,19px);
    line-height:1.65
}
.cta{
    color:#fff;
    background:linear-gradient(135deg,#19dc65,#049b42);
    border-radius:17px;
    align-items:center;
    gap:13px;
    width:fit-content;
    min-width:330px;
    margin-top:28px;
    padding:14px 16px;
    font-size:12px;
    font-weight:900;
    transition:all .3s;
    display:flex;
    position:relative;
    box-shadow:0 13px 40px #10c8594f
}
.cta:after{
    content:"";
    -webkit-mask-composite:xor;
    -webkit-mask-source-type:auto,auto;
    -webkit-mask-composite:xor;
    -webkit-mask-source-type:auto,auto;
    background:linear-gradient(90deg,#a5ffc4,#0db84d,#fff,#0db84d) 0 0/300%;
    border-radius:19px;
    padding:2px;
    animation:3s linear infinite flow;
    position:absolute;
    inset:-2px;
    -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-position:0 0,0 0;
    mask-position:0 0,0 0;
    -webkit-mask-size:auto,auto;
    mask-size:auto,auto;
    -webkit-mask-repeat:repeat,repeat;
    mask-repeat:repeat,repeat;
    -webkit-mask-clip:content-box,border-box;
    mask-clip:content-box,border-box;
    -webkit-mask-origin:content-box,border-box;
    mask-origin:content-box,border-box;
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    -webkit-mask-source-type:auto,auto;
    mask-mode:match-source,match-source
}
.cta svg{
    width:28px
}
.cta span{
    flex-direction:column;
    display:flex
}
.cta small{
    opacity:.8;
    margin-top:3px;
    font-size:9px;
    font-weight:400
}
.cta>b{
    margin-left:auto;
    font-size:18px
}
.cta:hover{
    transform:translateY(-4px)
}
@keyframes flow{
    to{
        background-position:300%
    }
}
.trust{
    color:#7e95a9;
    gap:22px;
    margin-top:22px;
    font-size:10px;
    display:flex
}
.hero-art{
    justify-content:center;
    align-items:flex-end;
    height:570px;
    display:flex;
    position:relative
}
.hero-art>img{
    object-fit:contain;
    filter:drop-shadow(0 30px 50px #00216e);
    width:115%;
    height:100%
}
.glass,.chart{
    z-index:2;
    -webkit-backdrop-filter:blur(15px);
    backdrop-filter:blur(15px);
    background:#071a35c4;
    border:1px solid #5fd8ff4d;
    border-radius:16px;
    position:absolute;
    box-shadow:0 20px 50px #0007
}
.glass{
    flex-direction:column;
    padding:15px 18px;
    display:flex
}
.glass small,.chart small{
    color:#6dbde4;
    letter-spacing:.13em;
    font-size:8px
}
.glass b{
    margin:5px 0
}
.glass i{
    color:var(--cyan);
    font-size:10px
}
.top{
    top:45px;
    right:3%
}
.bottom{
    flex-direction:row;
    align-items:center;
    gap:12px;
    bottom:20px;
    left:2%
}
.bottom strong{
    color:var(--cyan);
    font:32px Georgia
}
.bottom span{
    flex-direction:column;
    display:flex
}
.chart{
    width:270px;
    padding:13px;
    top:38%;
    left:-4%
}
.chart svg{
    width:100%;
    height:75px
}
.intro,.receive{
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:40px 80px;
    padding:110px max(6vw,24px);
    display:grid
}
.intro h2,.title h2,.video h2,.receive h2,.closing h2{
    letter-spacing:-.05em;
    margin:0;
    font-size:clamp(38px,4.3vw,67px);
    line-height:1
}
.light h2 em{
    color:#0b73ed
}
.intro>p,.receive>div>p{
    color:var(--muted);
    font-size:17px;
    line-height:1.7
}
.stats{
    border-top:1px solid #dce6ed;
    grid-column:1/-1;
    grid-template-columns:repeat(3,1fr);
    margin-top:28px;
    padding-top:25px;
    display:grid; 
}
.stats span{
    color:#788694;
    border-right:1px solid #dce6ed;
    padding-left:24px;
    font-size:11px;
    height: 90px;
    margin-top: -10px;
    margin-bottom: 10px;
}
.stats span:first-child{
    padding:0
}
.stats span:last-child{
    border:0
}
.stats b{
    color:#08234a;
    margin-bottom:5px;
    font-size:29px;
    display:block
}
.learn,.markets,.testimonials,.faq{
    padding:105px max(6vw,24px)
}
.title{
    text-align:center;
    max-width:850px;
    margin:0 auto 50px
}
.learn-grid{
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    max-width:1200px;
    margin:auto;
    display:grid
}
.learn-card{
    background:#fff;
    border:1px solid #dce8f0;
    border-radius:22px;
    min-height:335px;
    padding:24px;
    transition:all .35s
}
.learn-card:hover{
    border-color:#59cbff;
    transform:translateY(-8px);
    box-shadow:0 25px 55px #0d41621c
}
.learn-card>span{
    color:#94a6b5;
    font:11px monospace
}
.learn-card>i{
    color:var(--blue);
    margin:48px 0 26px;
    font-size:42px;
    font-style:normal;
    display:block
}
.learn-card h3{
    font-size:19px
}
.learn-card p{
    color:#687787;
    font-size:13px;
    line-height:1.65
}
.note{
    text-align:center;
    color:#708091;
    margin-top:38px
}
.markets{
    isolation:isolate;
    position:relative
}
.market-grid{
    grid-template-columns:1fr 1fr;
    gap:18px;
    max-width:1160px;
    margin:auto;
    display:grid
}
.market-card{
    background:linear-gradient(145deg,#092956e6,#030b18f2);
    border:1px solid #4cb8ff35;
    border-radius:28px;
    min-height:430px;
    padding:36px;
    position:relative;
    overflow:hidden
}
.market-card:after{
    content:"";
    filter:blur(55px);
    opacity:.4;
    background:#087cff;
    border-radius:50%;
    width:320px;
    height:320px;
    position:absolute;
    bottom:-170px;
    right:-120px
}
.market-card small{
    color:#70c6f5;
    font:11px monospace
}
.market-card h3{
    margin:50px 0 22px;
    font-size:37px;
    line-height:1
}
.market-card p{
    color:#98adbf;
    max-width:470px;
    line-height:1.7
}
.market-card div{
    border-top:1px solid #ffffff1c;
    flex-wrap:wrap;
    gap:8px;
    margin-top:32px;
    padding-top:23px;
    display:flex
}
.market-card div span{
    color:#b7ddf4;
    border:1px solid #55c9ff4a;
    border-radius:99px;
    padding:7px 10px;
    font-size:9px
}
.video{
    isolation:isolate;
    background:linear-gradient(120deg,#020711 15%,#071d45 68%,#064685);
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:45px;
    min-height:730px;
    padding:75px max(6vw,24px);
    display:grid;
    position:relative
}
.phone{
    height:620px;
    position:relative
}
.phone>img{
    z-index:2;
    object-fit:contain;
    pointer-events:none;
    width:100%;
    height:100%;
    position:absolute;
    inset:0
}
.screen{
    z-index:1;
    background:#000;
    border-radius:38px;
    width:31.3%;
    height:67.5%;
    position:absolute;
    top:7.5%;
    left:50%;
    overflow:hidden;
    transform:translate(-50%)
}
.screen iframe{
    border:0;
    width:100%;
    height:100%
}
.video-copy{
    max-width:610px
}
.video-copy p,.closing p{
    color:#a8bdd0;
    font-size:17px;
    line-height:1.7
}
.stack{
    flex-direction:column;
    gap:10px;
    display:flex
}
.stack>div{
    background:#f8fbfd;
    border:1px solid #dce8ef;
    border-radius:15px;
    grid-template-columns:55px 1fr 30px;
    align-items:center;
    padding:20px;
    transition:all .3s;
    display:grid
}
.stack>div:hover{
    border-color:#54c9ff;
    transform:translate(7px)
}
.stack small{
    color:#8495a4;
    font:11px monospace
}
.stack i{
    color:#0aa74d;
    background:#dbffea;
    border-radius:50%;
    place-items:center;
    width:26px;
    height:26px;
    font-style:normal;
    display:grid
}
.dark-btn{
    background:var(--ink);
    color:#fff;
    margin-top:17px;
    padding:17px 20px;
    display:inline-block
}
.slider{
    max-width:920px;
    margin:auto;
    position:relative
}
.slides{
    min-height:390px;
    position:relative
}
.slides article{
    opacity:0;
    pointer-events:none;
    background:#fff;
    border-radius:28px;
    padding:53px 70px;
    transition:all .5s;
    position:absolute;
    inset:0;
    transform:translate(25px)scale(.98);
    box-shadow:0 23px 65px #133b621a
}
.slides article.active{
    opacity:1;
    pointer-events:auto;
    transform:none
}
.slides article>span{
    color:var(--blue);
    font:78px/.4 Georgia
}
.slides article>div{
    color:#ffc400;
    letter-spacing:5px;
    margin:25px 0
}
.slides blockquote{
    margin:0;
    font:clamp(24px,3vw,38px)/1.35 Georgia
}
.slides p{
    color:#65778a;
    align-items:center;
    gap:12px;
    margin-top:30px;
    display:flex
}
.slides p b{
    color:#fff;
    background:linear-gradient(135deg,#087cff,#20e8ff);
    border-radius:50%;
    place-items:center;
    width:44px;
    height:44px;
    display:grid
}
.slider>button{
    z-index:3;
    background:var(--ink);
    color:#fff;
    cursor:pointer;
    border:0;
    border-radius:50%;
    width:45px;
    height:45px;
    position:absolute;
    top:45%
}
.prev{
    left:-22px
}
.next{
    right:-22px
}
.dots{
    justify-content:center;
    gap:7px;
    margin-top:24px;
    display:flex
}
.dots i{
    background:#9db2c3;
    border-radius:9px;
    width:8px;
    height:8px
}
.dots i.active{
    background:var(--blue);
    width:28px
}
.sample{
    text-align:center;
    color:#8292a1;
    margin-top:28px;
    font-size:10px
}
.closing{
    background:radial-gradient(circle at 80% 20%,#087cff,#0000 35%),#020712;
    border-radius:32px;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    margin:0 max(3vw,12px);
    padding:70px max(4vw,25px);
    display:flex
}
.closing>div{
    max-width:710px
}
.faq-list{
    max-width:900px;
    margin:auto
}
.faq details{
    border-bottom:1px solid #dce6ed;
    padding:20px 0
}
.faq summary{
    cursor:pointer;
    justify-content:space-between;
    gap:20px;
    font-size:17px;
    font-weight:800;
    list-style:none;
    display:flex
}
.faq summary::-webkit-details-marker{
    display:none
}
.faq summary span{
    color:var(--blue);
    font-size:25px;
    transition:all .3s
}
.faq details[open] summary span{
    transform:rotate(45deg)
}
.faq details p{
    color:#667687;
    line-height:1.65
}
footer{
    text-align:center;
    color:#8298aa;
    background:#020712;
    padding:65px max(6vw,24px) 35px
}
.footer-brand{
    color:#fff;
    justify-content:center
}
footer>p{
    color:#d5e2ec
}
footer>small{
    max-width:850px;
    margin:27px auto;
    line-height:1.65;
    display:block
}
footer>div:last-child{
    border-top:1px solid #14263a;
    padding-top:24px;
    font-size:10px
}
.floating{
    z-index:50;
    color:#fff;
    background:linear-gradient(135deg,#20df6b,#07913f);
    border:1px solid #ffffff80;
    border-radius:17px;
    align-items:center;
    gap:9px;
    padding:9px 15px 9px 10px;
    animation:6s infinite heart;
    display:flex;
    position:fixed;
    bottom:16px;
    right:16px;
    box-shadow:0 12px 35px #09ae4d66
}
.floating svg{
    width:31px
}
.floating b{
    flex-direction:column;
    font-size:12px;
    display:flex
}
.floating small{
    opacity:.8;
    font-size:9px;
    font-weight:400
}
@keyframes heart{
    0%,84%,to{
        transform:scale(1)
    }
    87%{
        transform:scale(1.1)
    }
    90%{
        transform:scale(.98)
    }
    93%{
        transform:scale(1.08)
    }
    96%{
        transform:scale(1)
    }
}
.reveal{
    opacity:0;
    transition:all .8s;
    transform:translateY(28px)
}
.reveal.visible{
    opacity:1;
    transform:none
}
@media (width<=900px){
    header nav{
        display:none
    }
    .hero{
        text-align:center;
        grid-template-columns:1fr
    }
    .hero-copy{
        margin:auto
    }
    .cta{
        margin-inline:auto
    }
    .trust{
        flex-wrap:wrap;
        justify-content:center
    }
    .hero-art{
        height:470px
    }
    .intro,.receive,.video{
        grid-template-columns:1fr
    }
    .learn-grid{
        grid-template-columns:1fr 1fr
    }
    .market-grid{
        grid-template-columns:1fr
    }
    .video-copy{
        text-align:center;
        margin:auto
    }
    .closing{
        text-align:center;
        flex-direction:column
    }
}
@media (width<=560px){
    header{
        width:calc(100% - 18px);
        height:62px;
        padding-left:11px;
        top:9px
    }
    .head-cta{
        padding:11px;
        font-size:0
    }
    .head-cta svg{
        width:21px
    }
    .brand span{
        font-size:10px
    }
    .hero{
        gap:5px;
        min-height:auto;
        padding:116px 16px 62px
    }
    .ticker{
        gap:16px;
        font-size:8px;
        top:84px
    }
    .hero h1{
        font-size:clamp(38px,12.7vw,57px)
    }
    .hero-copy>p{
        font-size:15px
    }
    .cta{
        width:100%;
        min-width:0
    }
    .trust{
        gap:8px 14px;
        font-size:9px
    }
    .hero-art{
        height:390px
    }
    .chart{
        width:210px;
        left:-4%
    }
    .top{
        right:-5px
    }
    .bottom{
        left:0
    }
    .intro,.learn,.markets,.video,.receive,.testimonials,.faq{
        padding:72px 17px
    }
    .intro{
        grid-template-columns:1fr
    }
    .stats{
        grid-template-columns:1fr;
        gap:15px
    }
    .stats span{
        border:0;
        border-bottom:1px solid #dce6ed;
        padding:0 0 14px
    }
    .learn-grid{
        grid-template-columns:1fr
    }
    .learn-card{
        min-height:285px
    }
    .market-card{
        min-height:0;
        padding:27px
    }
    .market-card h3{
        margin-top:38px;
        font-size:31px
    }
    .phone{
        height:500px
    }
    .screen{
        border-radius:27px;
        width:42%
    }
    .video{
        gap:0
    }
    .video-copy{
        margin-top:-12px
    }
    .slides{
        min-height:445px
    }
    .slides article{
        padding:42px 27px
    }
    .slider>button{
        top:auto;
        bottom:-60px
    }
    .prev{
        left:25%
    }
    .next{
        right:25%
    }
    .dots{
        margin-top:72px
    }
    .closing{
        margin:0 9px;
        padding:52px 19px
    }
    .floating{
        padding:9px;
        bottom:9px;
        right:9px
    }
    .floating b{
        display:none
    }
    .floating svg{
        width:35px
    }
    .faq summary{
        font-size:15px
    }
}
@media (width<=300px){
    .hero{
        padding-left:10px;
        padding-right:10px
    }
    .phone{
        height:420px
    }
    .screen{
        border-radius:21px;
        width:44%
    }
    .intro h2,.title h2,.video h2,.receive h2,.closing h2{
        font-size:33px
    }
    .chart{
        width:185px
    }
    .glass{
        padding:9px
    }
    .slides article{
        padding:34px 20px
    }
    .slides blockquote{
        font-size:22px
    }
}
@media (prefers-reduced-motion:reduce){
    *{
        transition:none!important;
        animation:none!important
    }
    .reveal{
        opacity:1;
        transform:none
    }
}
.dark{
    background:#000207
}
.hero{
    background:radial-gradient(at 79% 52%,#075fff45 0,#003d8824 25%,#0000 54%),radial-gradient(circle at 14% 12%,#0bc8ff17,#0000 31%),linear-gradient(132deg,#000207 0%,#020817 50%,#00040c 100%);
    grid-template-columns:1.02fr .98fr;
    min-height:820px
}
.hero:before,.markets:before,.video:before{
    background-image:linear-gradient(#37eaff0d 1px,#0000 1px),linear-gradient(90deg,#37eaff0d 1px,#0000 1px);
    background-size:54px 54px;
    -webkit-mask-image:linear-gradient(#0000 2%,#000 33% 70%,#0000);
    mask-image:linear-gradient(#0000 2%,#000 33% 70%,#0000)
}
.hero:after{
    content:"";
    z-index:-1;
    filter:blur(115px);
    opacity:.22;
    background:#087cff;
    border-radius:50%;
    width:620px;
    height:620px;
    animation:5s ease-in-out infinite alternate heroGlow;
    position:absolute;
    top:16%;
    right:1%
}
@keyframes heroGlow{
    to{
        opacity:.44;
        transform:scale(1.12)
    }
}
.hero-art{
    perspective:1000px;
    height:590px
}
.hero-art>img{
    object-fit:contain;
    z-index:1;
    filter:drop-shadow(0 32px 55px #000)drop-shadow(0 0 34px #078dff8c);
    width:112%;
    height:100%;
    animation:5.5s ease-in-out infinite heroFloat;
    position:relative
}
@keyframes heroFloat{
    50%{
        transform:translateY(-9px)
    }
}
.hero-orbit{
    border:1px solid #42deff32;
    border-radius:50%;
    width:500px;
    height:500px;
    animation:4s ease-in-out infinite orbitPulse;
    position:absolute;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 70px #087cff40,inset 0 0 70px #087cff24
}
.hero-orbit:before,.hero-orbit:after{
    content:"";
    border:1px solid #29dfff29;
    border-radius:50%;
    position:absolute;
    inset:45px
}
.hero-orbit:after{
    border-style:dashed;
    animation:18s linear infinite spin;
    inset:95px
}
@keyframes spin{
    to{
        transform:rotate(360deg)
    }
}
@keyframes orbitPulse{
    50%{
        opacity:.72;
        transform:translate(-50%,-50%)scale(1.06)
    }
}
.glass,.chart{
    -webkit-backdrop-filter:blur(22px)saturate(150%);
    backdrop-filter:blur(22px)saturate(150%);
    background:linear-gradient(135deg,#0c2b4e7a,#04101e4f);
    border-color:#6feaff9c;
    transition:transform .35s,border-color .35s,box-shadow .35s;
    box-shadow:0 18px 55px #000b,0 0 24px #169eff38,inset 0 0 23px #21dcff12
}
.glass:before,.chart:before{
    content:"";
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(120deg,#baffffcc,#0000 24% 70%,#087cffcc);
    padding:1px;
    position:absolute;
    inset:-1px;
    -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-position:0 0,0 0;
    mask-position:0 0,0 0;
    -webkit-mask-size:auto,auto;
    mask-size:auto,auto;
    -webkit-mask-repeat:repeat,repeat;
    mask-repeat:repeat,repeat;
    -webkit-mask-clip:content-box,border-box;
    mask-clip:content-box,border-box;
    -webkit-mask-origin:content-box,border-box;
    mask-origin:content-box,border-box;
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    -webkit-mask-source-type:auto,auto;
    mask-mode:match-source,match-source
}
.glass:hover,.chart:hover{
    border-color:#c6fdff;
    transform:translateY(-7px)rotateX(2deg);
    box-shadow:0 25px 70px #000c,0 0 38px #20e8ff6b,inset 0 0 28px #20e8ff24
}
.glass i span{
    background:#36f88e;
    border-radius:50%;
    width:6px;
    height:6px;
    margin-right:4px;
    animation:1.6s infinite live;
    display:inline-block;
    box-shadow:0 0 12px #36f88e
}
@keyframes live{
    50%{
        opacity:.35
    }
}
.chart{
    width:275px
}
.chart-points{
    gap:4px;
    display:flex;
    position:absolute;
    bottom:12px;
    right:14px
}
.chart-points i{
    background:#20e8ff;
    border-radius:50%;
    width:4px;
    height:4px;
    box-shadow:0 0 8px #20e8ff
}
.pulse-card{
    animation:4.4s ease-in-out infinite cardDrift;
    bottom:88px;
    right:-1%
}
.pulse-card b{
    color:#fff
}
.pulse-card:after{
    content:"";
    background:#39f18b;
    border-radius:50%;
    width:7px;
    height:7px;
    position:absolute;
    top:13px;
    right:13px;
    box-shadow:0 0 12px #39f18b
}
@keyframes cardDrift{
    50%{
        transform:translate(5px,-10px)
    }
}
.market-card{
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    background:linear-gradient(145deg,#092956b8,#020915d9);
    border-color:#55dfff70;
    transition:all .4s;
    box-shadow:inset 0 0 38px #0ba7ff12,0 18px 55px #0009
}
.market-card:hover{
    border-color:#9af6ff;
    transform:translateY(-8px);
    box-shadow:inset 0 0 45px #0ba7ff24,0 25px 70px #000c,0 0 32px #087cff42
}
.video{
    background:radial-gradient(circle at 24%,#058cff4d,#0000 34%),linear-gradient(120deg,#000207 15%,#03122b 68%,#052f62)
}
@media (width<=560px){
    .hero-art{
        height:430px
    }
    .hero-orbit{
        width:330px;
        height:330px
    }
    .pulse-card{
        bottom:55px;
        right:-8px
    }
    .hero-art>img{
        width:118%
    }
}
@media (width<=300px){
    .hero-art{
        height:360px
    }
    .hero-orbit{
        width:280px;
        height:280px
    }
    .pulse-card{
        display:none
    }
}
@media (prefers-reduced-motion:reduce){
    .hero-art>img,.hero-orbit,.pulse-card{
        animation:none
    }
}
.intro{
    background:linear-gradient(132deg,#fff 10%,#f2fbff 48%,#e4f7ff 100%);
    position:relative;
    overflow:hidden
}
.intro:before{
    content:"";
    filter:blur(105px);
    opacity:.2;
    background:#18bfff;
    border-radius:50%;
    width:480px;
    height:480px;
    position:absolute;
    top:-250px;
    right:-150px
}
.intro:after{
    content:"";
    filter:blur(100px);
    opacity:.13;
    background:#087cff;
    border-radius:50%;
    width:330px;
    height:330px;
    position:absolute;
    bottom:-220px;
    left:-180px
}
.intro>*{
    z-index:1;
    position:relative
}
.intro h2 em{
    text-shadow:0 8px 35px #29baff25
}
.stats{
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    background:linear-gradient(120deg,#ffffff9e,#dff7ff73);
    border-radius:22px;
    padding:25px 24px 0;
    box-shadow:0 20px 55px #0b6ea815,inset 0 0 0 1px #5bd8ff43
}
.stats span{
    transition:all .35s
}
.stats span:hover{
    color:#087cff;
    transform:translateY(-5px)
}
.learn{
    background:radial-gradient(circle at 8% 15%,#36d9ff24,#0000 25%),radial-gradient(circle at 92% 78%,#087cff1c,#0000 28%),linear-gradient(#f5fbff,#edf7fd)
}
.learn-card{
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    background:linear-gradient(145deg,#ffffffde,#f5fcffba);
    box-shadow:inset 0 0 0 1px #ffffffb3
}
.learn-card:hover{
    box-shadow:0 25px 60px #087cff1f,0 0 28px #21d9ff24,inset 0 0 0 1px #8ceeff
}
.receive{
    background:linear-gradient(135deg,#fff 3%,#f1fbff 54%,#dcf4ff);
    position:relative;
    overflow:hidden
}
.receive:before{
    content:"";
    filter:blur(90px);
    opacity:.23;
    background:#0c91ff;
    border-radius:50%;
    width:520px;
    height:520px;
    position:absolute;
    bottom:-430px;
    left:30%
}
.receive>*{
    z-index:1;
    position:relative
}
.stack>div{
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    background:linear-gradient(135deg,#ffffffd9,#eaf9ffbf);
    box-shadow:0 12px 30px #0b6fa10d,inset 0 0 0 1px #fff
}
.stack>div:hover{
    box-shadow:0 20px 46px #087cff1d,0 0 18px #36ddff26
}
.testimonials{
    background:radial-gradient(circle at 20% 20%,#20dfff20,#0000 28%),linear-gradient(145deg,#f3faff,#e8f5fc)
}
.slides article{
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    background:linear-gradient(145deg,#ffffffed,#f3fbffda);
    border:1px solid #80dfff66
}
.phone{
    filter:drop-shadow(0 35px 55px #000b);
    height:650px
}
.phone-glow{
    filter:blur(100px);
    opacity:.34;
    background:#078cff;
    border-radius:50%;
    width:420px;
    height:520px;
    animation:4s ease-in-out infinite alternate phoneGlow;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
@keyframes phoneGlow{
    to{
        opacity:.55;
        transform:translate(-50%,-50%)scale(1.08)
    }
}
.screen{
    border-radius:46px;
    width:39.5%;
    height:85.5%;
    top:7.1%
}
.phone>img{
    z-index:3
}
.sound-hint{
    z-index:5;
    color:#e8fdff;
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    background:#071b31a8;
    border:1px solid #7beaff9a;
    border-radius:99px;
    align-items:center;
    gap:9px;
    width:max-content;
    padding:10px 14px;
    font-size:10px;
    transition:all .35s;
    animation:2.2s infinite soundPulse;
    display:flex;
    position:absolute;
    bottom:1%;
    left:50%;
    transform:translate(-50%);
    box-shadow:0 0 25px #1ccfff4c
}
.sound-hint span{
    color:#20e8ff;
    font-size:16px
}
.sound-hint.hidden{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,10px)
}
@keyframes soundPulse{
    50%{
        transform:translate(-50%)scale(1.035);
        box-shadow:0 0 38px #1ccfff80
    }
}
@media (width<=560px){
    .intro,.receive{
        background:linear-gradient(145deg,#fff,#e8f8ff)
    }
    .stats{
        padding:20px 18px 0
    }
    .phone{
        height:540px
    }
    .screen{
        border-radius:33px;
        width:52.4%;
        height:85%
    }
    .sound-hint{
        font-size:9px;
        bottom:0
    }
}
@media (width<=300px){
    .phone{
        height:450px
    }
    .screen{
        border-radius:27px;
        width:54%
    }
    .sound-hint{
        font-size:0
    }
    .sound-hint span{
        font-size:17px
    }
}
/* =========================================
   HERO RESPONSIVE
   Desktop: texto | imagen
   Mobile: imagen arriba | texto abajo
========================================= */

@media (width <= 900px) {

    .hero {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero-art"
            "hero-copy";

        text-align: center;
        gap: 15px;

        min-height: auto;

        padding-left: 24px;
        padding-right: 24px;
    }

    /* IMAGEN PRIMERO */
    .hero-art {
        grid-area: hero-art;
        width: 100%;
        height: clamp(360px, 60vw, 520px);

        margin: 0 auto;

        order: 1;
    }

    /* TEXTO DESPUÉS */
    .hero-copy {
        grid-area: hero-copy;
        width: 100%;
        max-width: 710px;

        margin: 0 auto;

        order: 2;
    }

    .hero-art > img {
        width: 100%;
        max-width: 620px;
        height: 100%;

        margin: 0 auto;

        object-fit: contain;
    }

    .hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero .cta {
        margin-left: auto;
        margin-right: auto;
    }

    .hero .trust {
        justify-content: center;
    }
}


/* =========================================
   CELULARES
========================================= */

@media (width <= 560px) {

    .hero {
        gap: 0;

        padding-top: 105px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 55px;
    }

    .hero-art {
        height: clamp(320px, 105vw, 430px);
        margin-bottom: 5px;
    }

    .hero-art > img {
        width: 115%;
        max-width: none;

        position: relative;
        left: 50%;

        transform: translateX(-50%);
          animation: none !important;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(36px, 12vw, 55px);
    }

    .hero-copy > p {
        font-size: 15px;
    }

    .hero .cta {
        width: 100%;
        min-width: 0;
    }
}


/* =========================================
   PANTALLAS MUY PEQUEÑAS
========================================= */

@media (width <= 300px) {

    .hero {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hero-art {
        height: 320px;
    }

    .hero-copy h1 {
        font-size: 36px;
    }
}



 

 
 

/* TABLET */
@media (max-width: 768px) {
  .screenphone1 {
    width: clamp(210px, 52vw, 300px);
  }
}

/* CELULARES */
@media (max-width: 480px) {
  .screenphone1 {
    width: min(78vw, 280px);

    border-width: 7px;
    border-radius: 34px;
  }

  .screenphone1 iframe {
    border-radius: 27px;
  }

  .screenphone1::before {
    top: 7px;
    height: 18px;
    width: 27%;
  }
}

/* PANTALLAS MUY PEQUEÑAS - desde 280px */
@media (max-width: 320px) {
  .screenphone1 {
    width: min(82vw, 235px);
    border-width: 6px;
    border-radius: 29px;
  }

  .screenphone1 iframe {
    border-radius: 23px;
  }
}
.screenphone1 {
  position: relative;

  width: clamp(210px, 24vw, 330px);
  aspect-ratio: 9 / 19.5;

   

  background: #000;
  overflow: hidden;

 
}

 

/* TABLET */
@media (max-width: 768px) {
  .screenphone1 {
    width: clamp(210px, 52vw, 300px);
  }
}

/* CELULAR */
@media (max-width: 480px) {
  .screenphone1 {
    width: min(78vw, 280px);
    border-width: 7px;
    border-radius: 34px;
  }
}

/* CELULARES MUY PEQUEÑOS */
@media (max-width: 320px) {
  .screenphone1 {
    width: min(82vw, 235px);
    border-width: 6px;
    border-radius: 29px;
  }
}

.screenphone1 {
  position: relative;
  width: clamp(210px, 24vw, 330px);
  aspect-ratio: 9 / 19.5;

  border: 8px solid #080808;
  border-radius: 42px;

  background: #000;
  overflow: hidden;
}

.screenphone1 video {
   
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  border: 0;
}

/* BOTÓN SONIDO */
.finance-sound {
  position: absolute;
  z-index: 20;

  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  width: max-content;
  max-width: calc(100% - 30px);

  padding: 10px 15px;

  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;

  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;

  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform .25s ease,
    background .25s ease;
}

.finance-sound:hover {
  background: rgba(0,0,0,.85);
  transform: translateX(-50%) scale(1.04);
}

.finance-sound:active {
  transform: translateX(-50%) scale(.96);
}

#finance-sound-icon {
  font-size: 17px;
}


.video.dark {
  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 6vw, 90px);

  padding: clamp(40px, 7vw, 100px) 20px;

  box-sizing: border-box;
}

/* CELULAR */
.screenphone1 {
  flex: 0 0 auto;

  width: clamp(220px, 24vw, 330px);
  aspect-ratio: 9 / 19.5;

  position: relative;

  border: 8px solid #080808;
  border-radius: 42px;

  background: #000;
  overflow: hidden;

  margin: 0;
}

/* TEXTO */
.video-copy {
  flex: 0 1 600px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  margin: 0;
}

/* VIDEO */
.screenphone1 video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

/* TABLET Y MÓVIL */
@media (max-width: 850px) {
  .video.dark {
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    gap: 40px;
  }

  .screenphone1 {
    width: min(72vw, 290px);
  }

  .video-copy {
    flex: none;

    width: min(100%, 650px);

    align-items: center;
    text-align: center;
  }

  .video-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  .video-copy .cta {
    margin-left: auto;
    margin-right: auto;
  }
}

/* CELULARES PEQUEÑOS */
@media (max-width: 480px) {
  .video.dark {
    padding: 50px 16px;
    gap: 32px;
  }

  .screenphone1 {
    width: min(78vw, 260px);
  }

  .video-copy {
    width: 100%;
  }
}