.ss-download-btn-hero{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:42px;

    padding:0 18px;

    border:1px solid rgba(255,86,86,.18);

    border-radius:10px;

    text-decoration:none;

    font-size:11px;

    font-weight:500;

    color:#FFFFFF;

    background:

        linear-gradient(

            180deg,

            rgba(255,82,82,.18),

            rgba(195,43,43,.14)

        );

    transition:.22s;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05);

}
.ss-download-btn-hero svg{

    width:15px;

    height:15px;

    transition:.22s;

}
.ss-download-btn-hero:hover{

    color:#FFFFFF;

    border-color:rgba(255,110,110,.28);

    transform:translateY(-1px);

    background:

        linear-gradient(

            180deg,

            rgba(255,92,92,.24),

            rgba(220,48,48,.18)

        );

}
.ss-download-btn-hero:focus-visible{

    outline:2px solid rgba(103,179,255,.55);

    outline-offset:2px;

}
.ss-download-btn-hero{

    user-select:none;

    -webkit-user-select:none;

}
/*=========================================================
    HERO
=========================================================*/

.ss-hero{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    background:transparent;

    min-height:760px;

}


/*=========================================================
    CONTAINER
=========================================================*/

.hero-container{

    width:min(1200px,92%);

    margin:auto;

    position:relative;

    display:grid;

    grid-template-columns:1fr;

    gap:28px;

    z-index:20;

    padding:40px 0;

}


.ss-bg-noise{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:

    radial-gradient(#fff 1px,transparent 1px);

    background-size:4px 4px;

}

.ss-bg-particles{

    position:absolute;

    inset:0;

    opacity:.14;

    background-image:

    radial-gradient(circle,#6FAFFF 1px,transparent 1.4px);

    background-size:180px 180px;

}


/*=========================================================
    LEFT
=========================================================*/

.ss-left{

    position:relative;

    text-align:center;

    z-index:50;

}


/*=========================================================
    BADGE
=========================================================*/

.ss-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:30px;

    padding:0 14px;

    border-radius:999px;

    background:var(--ss-card);

    border:1px solid var(--ss-border);

    backdrop-filter:blur(20px);

    color:var(--ss-primary-light);

    font-size:10px;

    font-weight:500;

}

.ss-badge::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--ss-primary-light);

}


/*=========================================================
    TITLE
=========================================================*/

.ss-title{

    margin-top:18px;

    font-size:14px;

    line-height:1.65;

    font-weight:500;

}

.ss-title span{

    display:block;

    color:var(--ss-primary-light);

}


/*=========================================================
    DESCRIPTION
=========================================================*/

.ss-desc{

    width:min(340px,100%);

    margin:14px auto 0;

    color: var(--wp--preset--color--cyan-bluish-gray);

    font-size:11px;

    line-height:1.8;

}


/*=========================================================
    FEATURES
=========================================================*/

.ss-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:22px;

}

.ss-chip{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:82px;

    height:30px;

    padding:0 14px;

    border-radius:999px;

    background:var(--ss-card);

    border:1px solid var(--ss-border);

    backdrop-filter:blur(20px);

    font-size:10px;

    font-weight:500;

}


/*=========================================================
    BUTTON
=========================================================*/

.ss-actions{

    margin-top:24px;

}

.ss-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:34px;

    padding:0 18px;

    border-radius:14px;

    background:

    linear-gradient(

    180deg,

    #4A91FF,

    #2E6FDF);

    color:#fff;

    font-size:12px;

    font-weight:500;

    transition:var(--ss-speed);

}
/*=========================================================
    HERO VISUAL
=========================================================*/

.ss-right{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:430px;

    isolation:isolate;

}


/*=========================================================
    GLOBE
=========================================================*/

.ss-globe{

    position:absolute;

    left:50%;

    top:0;

    width:clamp(260px,78vw,560px);

    aspect-ratio:1;

    transform:translateX(-50%);

    z-index:10;

    pointer-events:none;

}

.ss-globe svg,

.ss-globe img{

    width:100%;

    height:100%;

    display:block;

}

.ss-globe::before{

    content:"";

    position:absolute;

    inset:16%;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(59,130,246,.22),

        rgba(59,130,246,.08),

        transparent 72%

    );

    filter:blur(42px);

    z-index:-2;

}

.ss-globe::after{

    content:"";

    position:absolute;

    inset:11%;

    border-radius:50%;

    border:1px solid rgba(59,130,246,.08);

    box-shadow:

    inset 0 0 80px rgba(59,130,246,.08),

    0 0 40px rgba(59,130,246,.12);

}


/*=========================================================
    DOWNLOAD RING
=========================================================*/

.ss-download{

    position:absolute;

    left:50%;

    top:95px;

    width:150px;

    aspect-ratio:1;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:40;

}

.ss-download-glow{

    position:absolute;

    inset:-14px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(72,160,255,.30),

        rgba(72,160,255,.10),

        transparent 72%

    );

    filter:blur(18px);

}

.ss-download-ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(120,198,255,.22);

}

.ss-download .ring-1{

    inset:0;

}

.ss-download .ring-2{

    inset:13px;

}

.ss-download .ring-3{

    inset:26px;

}

.ss-download-core{

    width:42px;

    aspect-ratio:1;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(

        180deg,

        #132A52,

        #091325

    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);

    box-shadow:

    0 0 20px rgba(59,130,246,.28);

}

.ss-download-icon{

    width:18px;

    height:18px;

    color:#D8F1FF;

}


/*=========================================================
    RECEIVER
=========================================================*/

.ss-receiver{

    position:absolute;

    left:50%;

    bottom:34px;

    width:clamp(250px,72vw,470px);

    transform:translateX(-50%);

    z-index:30;

}

.ss-receiver img{

    width:100%;

    height:auto;

    display:block;

    filter:

    drop-shadow(0 18px 26px rgba(0,0,0,.28))

    drop-shadow(0 34px 65px rgba(0,0,0,.45))

    drop-shadow(0 0 40px rgba(59,130,246,.18));

}

.ss-receiver::before{

    content:"";

    position:absolute;

    left:12%;

    right:12%;

    bottom:-14px;

    height:48px;

    border-radius:50%;

    background:

    radial-gradient(

        ellipse,

        rgba(59,130,246,.35),

        rgba(59,130,246,.12),

        transparent 72%

    );

    filter:blur(16px);

    z-index:-1;

}


/*=========================================================
    PLATFORM
=========================================================*/

.ss-platform{

    position:absolute;

    left:50%;

    bottom:0;

    width:clamp(220px,64vw,330px);

    height:82px;

    transform:translateX(-50%);

    display:flex;

    justify-content:center;

    align-items:center;

    pointer-events:none;

    z-index:20;

}

.ss-platform-glow{

    position:absolute;

    width:100%;

    height:100%;

    border-radius:50%;

    background:

    radial-gradient(

        ellipse,

        rgba(70,155,255,.36),

        rgba(70,155,255,.10),

        transparent 72%

    );

    filter:blur(22px);

}

.ss-platform-shadow{

    position:absolute;

    width:82%;

    height:56px;

    border-radius:50%;

    background:

    radial-gradient(

        ellipse,

        rgba(0,0,0,.45),

        transparent 75%

    );

    transform:translateY(18px);

}

.ss-platform-ring{

    position:absolute;

    left:50%;

    top:50%;

    border-radius:50%;

    transform:translate(-50%,-50%);

}

.ss-platform .ring-1{

    width:100%;

    height:34px;

    border:2px solid rgba(96,178,255,.35);

}

.ss-platform .ring-2{

    width:82%;

    height:28px;

    border:1px solid rgba(126,205,255,.26);

}

.ss-platform .ring-3{

    width:62%;

    height:20px;

    border:1px solid rgba(155,220,255,.20);

}

.ss-platform .ring-4{

    width:42%;

    height:12px;

    border:1px solid rgba(180,235,255,.16);

}

.ss-platform-core{

    width:48%;

    height:16px;

    border-radius:50%;

    background:

    radial-gradient(

        ellipse,

        rgba(115,195,255,.75),

        rgba(60,140,255,.28),

        transparent 72%

    );

    filter:blur(8px);

}
/*=========================================================
    HERO EFFECTS
    Part 3
    Production Version
=========================================================*/


/*=========================================================
    AMBIENT LIGHTS
=========================================================*/

.ss-light{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    pointer-events:none;

    z-index:1;

}

.ss-light-1{

    width:260px;

    aspect-ratio:1;

    top:40px;

    right:6%;

    background:rgba(59,130,246,.18);

}

.ss-light-2{

    width:170px;

    aspect-ratio:1;

    top:190px;

    right:32%;

    background:rgba(120,185,255,.12);

}

.ss-light-3{

    width:320px;

    aspect-ratio:1;

    bottom:-90px;

    right:-80px;

    background:rgba(59,130,246,.10);

}


/*=========================================================
    REFLECTION
=========================================================*/

.ss-reflection{

    position:absolute;

    width:260px;

    aspect-ratio:1;

    top:70px;

    right:18%;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.08),

        transparent 70%

    );

    filter:blur(60px);

    pointer-events:none;

    z-index:2;

}


/*=========================================================
    ORBS
=========================================================*/

.ss-orb{

    position:absolute;

    width:170px;

    aspect-ratio:1;

    top:70px;

    right:12%;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(80,170,255,.38),

        rgba(80,170,255,.08),

        transparent 75%

    );

    filter:blur(24px);

    pointer-events:none;

    z-index:2;

}

.ss-orb-small{

    position:absolute;

    width:80px;

    aspect-ratio:1;

    top:230px;

    right:30%;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(150,220,255,.30),

        transparent 75%

    );

    filter:blur(16px);

    pointer-events:none;

    z-index:2;

}


/*=========================================================
    PARTICLES
=========================================================*/

.ss-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

}

.ss-particles span{

    position:absolute;

    width:4px;

    aspect-ratio:1;

    border-radius:50%;

    background:#72B7FF;

    box-shadow:

    0 0 12px rgba(114,183,255,.85);

}


/*=========================================================
    STARS
=========================================================*/

.ss-stars{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:2;

}

.ss-stars::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.12;

    background-image:

    radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:140px 140px;

}


/*=========================================================
    DECORATIVE LINES
=========================================================*/

.ss-lines{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

.ss-lines::before{

    content:"";

    position:absolute;

    top:165px;

    right:-120px;

    width:720px;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(59,130,246,.18),

        transparent

    );

}

.ss-lines::after{

    content:"";

    position:absolute;

    top:40px;

    right:240px;

    width:1px;

    height:420px;

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(59,130,246,.14),

        transparent

    );

}


/*=========================================================
    GLASS OVERLAY
=========================================================*/

.ss-glass{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:4;

}

.ss-glass::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.03),

        rgba(255,255,255,0)

    );

}

.ss-glass::after{

    content:"";

    position:absolute;

    top:-40%;

    left:-35%;

    width:32%;

    height:220%;

    transform:rotate(24deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.04),

        transparent

    );

}


/*=========================================================
    BOTTOM GLOW
=========================================================*/

.ss-bottom-glow{

    position:absolute;

    left:50%;

    bottom:-130px;

    width:720px;

    height:240px;

    transform:translateX(-50%);

    border-radius:50%;

    background:

    radial-gradient(

        ellipse,

        rgba(59,130,246,.20),

        transparent 70%

    );

    filter:blur(55px);

    pointer-events:none;

    z-index:1;

}


/*=========================================================
    HERO OVERLAYS
=========================================================*/

.ss-hero::before{

    content:"";

    position:absolute;

    inset:0;

    

    pointer-events:none;

    z-index:5;

}

.ss-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:120px;

    pointer-events:none;

    z-index:5;

}


/*=========================================================
    DIVIDER
=========================================================*/

.ss-divider{

    position:absolute;

    left:390px;

    top:50%;

    width:1px;

    height:260px;

    transform:translateY(-50%);

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(59,130,246,.14),

        transparent

    );

}
/*=========================================================
    HERO ANIMATIONS
    Part 4
    Production Version
=========================================================*/


/*=========================================================
    KEYFRAMES
=========================================================*/

@keyframes ssFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes ssFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}


@keyframes ssRotate{

    from{

        rotate:0deg;

    }

    to{

        rotate:360deg;

    }

}


@keyframes ssPulse{

    0%{

        scale:.95;

        opacity:.35;

    }

    50%{

        scale:1.05;

        opacity:1;

    }

    100%{

        scale:.95;

        opacity:.35;

    }

}


@keyframes ssGlow{

    0%{

        opacity:.18;

    }

    50%{

        opacity:.70;

    }

    100%{

        opacity:.18;

    }

}


@keyframes ssParticle{

    from{

        translate:0 0;

    }

    to{

        translate:0 -18px;

    }

}


@keyframes ssLine{

    0%{

        opacity:.20;

    }

    50%{

        opacity:.80;

    }

    100%{

        opacity:.20;

    }

}


/*=========================================================
    ENTRANCE
=========================================================*/

.ss-left{

    animation:ssFadeUp .7s ease both;

}

.ss-badge{

    animation:ssFadeUp .8s ease both;

}

.ss-title{

    animation:ssFadeUp .9s ease both;

}

.ss-desc{

    animation:ssFadeUp 1s ease both;

}

.ss-features{

    animation:ssFadeUp 1.1s ease both;

}

.ss-actions{

    animation:ssFadeUp 1.2s ease both;

}


/*=========================================================
    HERO VISUAL
=========================================================*/

.ss-globe{

    animation:ssRotate 120s linear infinite;

}

.ss-download{

    animation:ssFloat 5s ease-in-out infinite;

}

.ss-receiver{

    animation:ssFloat 7s ease-in-out infinite;

}

.ss-platform-glow{

    animation:ssGlow 3.5s ease infinite;

}

.ss-reflection{

    animation:ssGlow 6s ease infinite;

}

.ss-light-1{

    animation:ssFloat 10s ease infinite;

}

.ss-light-2{

    animation:ssFloat 8s ease-in-out infinite reverse;

}

.ss-light-3{

    animation:ssFloat 12s ease infinite;

}

.ss-particles{

    animation:ssParticle 16s linear infinite alternate;

}

.ss-lines::before{

    animation:ssLine 4s linear infinite;

}

.ss-lines::after{

    animation:ssLine 6s linear infinite;

}

.ss-download .ring-1{

    animation:ssPulse 3s ease infinite;

}

.ss-download .ring-2{

    animation:ssPulse 4s ease infinite;

}

.ss-download .ring-3{

    animation:ssPulse 5s ease infinite;

}


/*=========================================================
    INTERACTION
=========================================================*/

.ss-btn{

    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.ss-btn:hover{

    transform:translateY(-2px);

    box-shadow:

    0 10px 28px rgba(59,130,246,.30);

}

.ss-chip{

    transition:

        border-color .25s ease,

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}

.ss-chip:hover{

    transform:translateY(-2px);

    border-color:rgba(59,130,246,.25);

    background:rgba(59,130,246,.05);

    box-shadow:

    0 0 18px rgba(59,130,246,.12);

}

.ss-download{

    transition:transform .25s ease;

}

.ss-download:hover{

    transform:

        translateX(-50%)

        scale(1.05);

}

.ss-receiver{

    transition:transform .35s ease;

}

.ss-receiver:hover{

    transform:

        translateX(-50%)

        translateY(-4px);

}


/*=========================================================
    PERFORMANCE
=========================================================*/

.ss-globe,

.ss-download,

.ss-receiver,

.ss-platform,

.ss-light,

.ss-reflection,

.ss-particles{

    will-change:

        transform,

        opacity;

}


/*=========================================================
    ACCESSIBILITY
=========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto;

    }

}
/*=========================================================
    RESPONSIVE
    Part 5
    Production Version
=========================================================*/


/*=========================================================
    ≥ 768px
=========================================================*/

@media (min-width:768px){

.hero-container{

    grid-template-columns:390px 1fr;

    align-items:center;

    gap:60px;

    padding:60px 0;

}

.ss-hero{

    min-height:520px;

}

.ss-left{

    text-align:left;

}

.ss-desc{

    margin:14px 0 0;

}

.ss-features{

    justify-content:flex-start;

}

.ss-actions{

    display:block;

}

.ss-right{

    min-height:520px;

}

.ss-globe{

    width:clamp(420px,46vw,560px);

    left:auto;

    right:-30px;

    top:-10px;

    transform:none;

}

.ss-download{

    left:105px;

    top:82px;

    transform:none;

}

.ss-receiver{

    width:clamp(360px,42vw,470px);

    left:auto;

    right:25px;

    bottom:58px;

    transform:none;

}

.ss-platform{

    width:clamp(260px,28vw,340px);

    left:auto;

    right:72px;

    bottom:18px;

    transform:none;

}

.ss-divider{

    display:block;

}

}


/*=========================================================
    ≥ 992px
=========================================================*/

@media (min-width:992px){

.hero-container{

    width:min(1200px,92%);

}

.ss-right{

    min-height:540px;

}

.ss-globe{

    width:540px;

}

.ss-receiver{

    width:450px;

}

}


/*=========================================================
    ≥ 1200px
=========================================================*/

@media (min-width:1200px){

.hero-container{

    width:min(1240px,92%);

}

.ss-globe{

    width:560px;

}

.ss-receiver{

    width:470px;

}

}


/*=========================================================
    ≥ 1400px
=========================================================*/

@media (min-width:1400px){

.hero-container{

    width:1320px;

}

.ss-globe{

    right:-10px;

}

}


/*=========================================================
    ≥ 1600px
=========================================================*/

@media (min-width:1600px){

.hero-container{

    width:1400px;

}

.ss-globe{

    width:590px;

}

.ss-receiver{

    width:490px;

}

}

*{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto;

    }
/*=========================================================
    ≤ 767px
=========================================================*/

@media (max-width:767px){

.ss-hero{

    min-height:auto;

}

.hero-container{

    padding:28px 0 40px;

}

.ss-right{

    min-height:420px;

}

.ss-globe{

    width:290px;

    left:70%;

    top:20px;

    transform:translateX(-50%);

}

.ss-download{

    width:150px;

    left:20%;

    top:120px;

    transform:translateX(-50%);

}



.ss-platform{

    width:255px;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

}

.ss-divider{

    display:none;

}

}


/*=========================================================
    ≤ 576px
=========================================================*/

@media (max-width:576px){

.hero-container{

    width:min(94%,420px);

}

.ss-right{

    min-height:380px;

}



.ss-platform{

    width:230px;

}

}


/*=========================================================
    ≤ 420px
=========================================================*/

@media (max-width:420px){

.hero-container{

    width:92%;

}

.ss-right{

    min-height:355px;

}

.ss-globe{

    width:245px;

}

.ss-download{

    width:120px;

    top:100px;

}

.ss-receiver{

    width:235px;

    bottom:34px;

}

.ss-platform{

    width:210px;

}

}


/*=========================================================
    ≤ 360px
=========================================================*/

@media (max-width:360px){

.ss-right{

    min-height:330px;

}

.ss-globe{

    width:220px;

}

.ss-download{

    width:90px;

    top:90px;

}

.ss-receiver{

    width:210px;

    bottom:30px;

}

.ss-platform{

    width:185px;

}

}


/*=========================================================
    PRINT
=========================================================*/

@media print{

.ss-hero{

    display:none;

}

}