/* =========================================
   RBXCURSOR
========================================= */

:root {

    --pink: #ff66b6;

    --pink-light: #ff9ed2;

    --pink-dark: #f83f9d;

    --bg: #090709;

    --panel: #100b0f;

    --white: #fff7fb;

    --muted: #8e838b;

    --border:
        rgba(255,255,255,.065);

}


/* =========================================
   BASE
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    min-height: 100vh;

    color: var(--white);

    background:

        radial-gradient(
            circle at 85% 7%,
            rgba(255,53,157,.16),
            transparent 28rem
        ),

        radial-gradient(
            circle at 25% 35%,
            rgba(255,98,181,.07),
            transparent 30rem
        ),

        #090709;

    font-family:
        Inter,
        Arial,
        sans-serif;

    overflow-x: hidden;

}


a {
    color: inherit;
}


button,
input,
a,
summary {
    font-family: inherit;
}


/* =========================================
   NOISE
========================================= */

.noise {

    position: fixed;

    inset: 0;

    z-index: 1000000;

    opacity: .022;

    pointer-events: none;

    background-image:

        url(
        "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
        );

}


/* =========================================
   BACKGROUND GLOWS
========================================= */

.pink-glow {

    position: fixed;

    border-radius: 100%;

    filter:
        blur(120px);

    pointer-events: none;

    z-index: -1;

}


.glow1 {

    width: 450px;

    height: 450px;

    right: -120px;

    top: 70px;

    background:
        rgba(255,45,150,.14);

}


.glow2 {

    width: 350px;

    height: 350px;

    left: 25%;

    top: 900px;

    background:
        rgba(255,102,184,.07);

}


/* =========================================
   NAVBAR
========================================= */

.nav-shell {

    position: sticky;

    top: 0;

    z-index: 50;

    padding:
        14px 20px 0;

}


.nav {

    max-width: 1200px;

    height: 70px;

    margin: auto;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    border-radius: 22px;

    background:
        rgba(10,7,10,.77);

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 15px 60px
        rgba(0,0,0,.25);

}


.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

}


.logo {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    color: #1b0a14;

    background:

        linear-gradient(
            145deg,
            #ff9fd3,
            #ff55ac
        );

    box-shadow:

        0 0 30px
        rgba(255,83,173,.25);

    font-size: 20px;

    font-weight: 900;

}


.brand-name {

    font-size: 18px;

    font-weight: 900;

    letter-spacing: -.8px;

}


.brand-name span {
    color: var(--pink);
}


.links {

    display: flex;

    gap: 34px;

}


.links a {

    color: #9e929b;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition:
        color .2s ease;

}


.links a:hover {
    color: white;
}


.top-download {

    padding:
        13px 20px;

    border:
        1px solid
        rgba(255,123,193,.3);

    border-radius: 14px;

    color: #ffacd5;

    background:
        rgba(255,94,177,.06);

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition:
        .2s ease;

}


.top-download:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255,94,177,.11);

}


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

.hero {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    min-height: 790px;

    margin: auto;

    display: grid;

    grid-template-columns:
        .92fr 1.08fr;

    align-items: center;

    gap: 75px;

    padding:
        110px 0 90px;

}


.badge {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(255,120,190,.15);

    border-radius: 100px;

    color: #b9adb5;

    background:
        rgba(255,255,255,.015);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .08em;

}


.badge i {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0 0 14px
        var(--pink);

}


.hero h1 {

    margin:
        23px 0 0;

    font-size:
        clamp(
            55px,
            6vw,
            82px
        );

    line-height: .98;

    letter-spacing: -.065em;

}


.hero h1 span {

    color: var(--pink);

    text-shadow:
        0 0 40px
        rgba(255,89,179,.12);

}


.description {

    max-width: 530px;

    margin-top: 28px;

    color: #9b9098;

    font-size: 17px;

    line-height: 1.7;

}


.hero-buttons {

    display: flex;

    gap: 14px;

    margin-top: 34px;

}


/* =========================================
   BUTTONS
========================================= */

.main-button,
.secondary-button {

    min-width: 220px;

    min-height: 75px;

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        12px 17px;

    border-radius: 18px;

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;

}


.main-button {

    border:
        1px solid
        rgba(255,137,200,.32);

    background:

        linear-gradient(
            180deg,
            rgba(255,107,187,.12),
            rgba(255,54,159,.04)
        );

    box-shadow:

        0 18px 55px
        rgba(255,60,159,.08);

}


.secondary-button {

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

    background:
        rgba(255,255,255,.02);

}


.main-button:hover,
.secondary-button:hover {

    transform:
        translateY(-4px);

}


.main-button:hover {

    border-color:
        rgba(255,137,200,.55);

}


.button-icon {

    width: 47px;

    height: 47px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:

        linear-gradient(
            145deg,
            #ff7cc1,
            #f84fa6
        );

    box-shadow:

        0 12px 30px
        rgba(255,64,160,.25);

    font-size: 20px;

}


.button-icon.dark {

    color: var(--pink);

    background:
        #110c10;

    border:
        1px solid
        rgba(255,130,195,.14);

}


.main-button strong,
.secondary-button strong {

    display: block;

    font-size: 14px;

}


.main-button small,
.secondary-button small {

    display: block;

    margin-top: 4px;

    color: #7d727a;

    font-size: 11px;

}


/* =========================================
   HERO SMALL TEXT
========================================= */

.hero-small {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-top: 35px;

}


.small-icons {

    display: flex;

    padding-left: 8px;

}


.small-icons span {

    width: 30px;

    height: 30px;

    margin-left: -8px;

    display: grid;

    place-items: center;

    border:
        2px solid #090709;

    border-radius: 50%;

    background:
        #171017;

    color:
        var(--pink);

    font-size: 11px;

}


.hero-small strong {

    display: block;

    font-size: 12px;

}


.hero-small p {

    margin:
        3px 0 0;

    color:
        #6d636a;

    font-size: 11px;

}


/* =========================================
   EXTENSION PREVIEW
========================================= */

.hero-right {

    position: relative;

    min-height: 540px;

    display: grid;

    place-items: center;

}


.floating-dot {

    position: absolute;

    border-radius: 50%;

    background:
        #ffc0df;

    box-shadow:
        0 0 20px
        var(--pink);

    animation:
        floating 3s
        ease-in-out infinite;

}


.dot1 {

    width: 11px;

    height: 11px;

    top: 50px;

    left: 20px;

}


.dot2 {

    width: 8px;

    height: 8px;

    top: 95px;

    left: 80px;

    animation-delay:
        .5s;

}


.dot3 {

    width: 6px;

    height: 6px;

    top: 150px;

    left: 130px;

    animation-delay:
        1s;

}


@keyframes floating {

    50% {

        transform:
            translateY(-14px);

    }

}


.extension {

    position: relative;

    width:
        min(
            100%,
            620px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(255,130,195,.13);

    border-radius: 28px;

    background:
        rgba(10,7,10,.9);

    box-shadow:

        0 40px 100px
        rgba(0,0,0,.6),

        0 0 80px
        rgba(255,60,160,.05);

}


.extension-header {

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 19px;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

    color:
        #958a92;

    font-size: 12px;

    font-weight: 700;

}


.live {

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #d6cad2;

}


.live i {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0 0 12px
        var(--pink);

}


/* =========================================
   PREVIEW
========================================= */

.preview {

    position: relative;

    height: 365px;

    overflow: hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(255,100,181,.09),
            transparent 28%
        );

}


.preview-grid {

    position: absolute;

    inset: 0;

    opacity: .11;

    background-image:

        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

}


.cursor-glow {

    position: absolute;

    left: 50%;

    top: 49%;

    width: 190px;

    height: 190px;

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

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255,118,192,.19),
            rgba(255,91,181,.05) 45%,
            transparent 72%
        );

    filter:
        blur(7px);

    pointer-events: none;

}


.cursor {

    position: absolute;

    left: 50%;

    top: 49%;

    width: 115px;

    height: 115px;

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

    display: grid;

    place-items: center;

    filter:

        drop-shadow(
            0 0 20px
            rgba(255,111,189,.85)
        );

    transition:
        left .04s linear,
        top .04s linear;

    pointer-events: none;

}


/* =========================================
   PAW
========================================= */

.paw {

    position: relative;

    width: 92px;

    height: 86px;

}


.paw i {

    position: absolute;

    display: block;

    background:
        #fff6fa;

    box-shadow:
        inset 0 0 0
        9px #ffc0df;

}


.toe {

    width: 30px;

    height: 38px;

    border-radius: 50%;

}


.toe1 {

    left: 3px;

    top: 15px;

    transform:
        rotate(-24deg);

}


.toe2 {

    left: 30px;

    top: 0;

}


.toe3 {

    right: 4px;

    top: 12px;

    transform:
        rotate(24deg);

}


.toe4 {

    right: -2px;

    top: 39px;

    width: 23px;

    height: 29px;

    transform:
        rotate(32deg);

}


.pad {

    width: 60px;

    height: 49px;

    left: 19px;

    bottom: 2px;

    border-radius:
        48% 48% 42% 42%;

}


.cursor-symbol {

    color: white;

    font-size: 82px;

    font-weight: 900;

    text-shadow:

        0 0 8px white,

        0 0 22px
        var(--pink);

}


/* =========================================
   PREVIEW LABELS
========================================= */

.selected,
.glow-text {

    position: absolute;

    bottom: 22px;

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.selected {
    left: 20px;
}


.glow-text {

    right: 105px;

    text-align: right;

}


.selected small,
.glow-text small {

    color:
        #6c6269;

    font-size: 10px;

}


.selected strong,
.glow-text strong {

    color:
        var(--pink);

    font-size: 14px;

}


/* =========================================
   PRESETS
========================================= */

.presets {

    position: absolute;

    right: 0;

    top: 55px;

    bottom: 70px;

    width: 84px;

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding:
        12px 10px;

    border-left:
        1px solid
        rgba(255,255,255,.05);

    background:
        rgba(7,5,7,.55);

}


.preset {

    height: 55px;

    border:
        1px solid
        transparent;

    border-radius: 13px;

    color:
        #6c6269;

    background:
        transparent;

    cursor: pointer;

    transition:
        .2s ease;

}


.preset.active,
.preset:hover {

    color: white;

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

    background:
        rgba(255,103,183,.05);

}


.preset span {

    display: block;

    color: white;

    font-size: 20px;

    text-shadow:
        0 0 14px
        var(--pink);

}


.preset small {

    display: block;

    margin-top: 3px;

    font-size: 8px;

}


/* =========================================
   PREVIEW CONTROLS
========================================= */

.controls {

    height: 70px;

    margin-right: 84px;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 24px;

    padding:
        13px 25px;

    border-top:
        1px solid
        rgba(255,255,255,.05);

}


.controls label {

    display: flex;

    flex-direction: column-reverse;

    gap: 7px;

    color:
        #685e65;

    font-size: 8px;

    font-weight: 800;

    text-align: center;

}


input[type="range"] {

    width: 100%;

    height: 4px;

    appearance: none;

    border-radius: 50px;

    background:
        #2b2229;

}


input[type="range"]::-webkit-slider-thumb {

    appearance: none;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background:
        #ff9ed2;

    box-shadow:
        0 0 10px
        var(--pink);

}


/* =========================================
   TICKER
========================================= */

.ticker {

    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,.05);

    border-bottom:
        1px solid
        rgba(255,255,255,.05);

}


.ticker-inner {

    width: max-content;

    height: 52px;

    display: flex;

    align-items: center;

    gap: 24px;

    color:
        #6a6067;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .12em;

    animation:
        ticker 22s
        linear infinite;

}


.ticker-inner b {
    color: var(--pink);
}


@keyframes ticker {

    to {

        transform:
            translateX(-50%);

    }

}


/* =========================================
   GENERIC SECTIONS
========================================= */

.section {

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin: auto;

    padding:
        115px 0;

}


.section-title {

    max-width: 700px;

    margin-bottom: 48px;

}


.section-title small,
.split-title small,
.install-left > small,
.download-section > small {

    color:
        var(--pink);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .17em;

}


.section-title h2,
.split-title h2,
.install-left h2,
.download-section h2 {

    margin:
        15px 0 0;

    font-size:

        clamp(
            42px,
            5vw,
            64px
        );

    line-height: 1;

    letter-spacing: -.055em;

}


.section-title h2 span,
.split-title h2 span,
.install-left h2 span,
.download-section h2 span {

    color:
        var(--pink);

}


.section-title p {

    color:
        var(--muted);

    line-height: 1.7;

}


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

.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 16px;

}


.feature-card {

    position: relative;

    min-height: 370px;

    padding: 27px;

    overflow: hidden;

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

    border-radius: 24px;

    background:
        rgba(255,255,255,.018);

    transition:
        .25s ease;

}


.feature-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,102,182,.2);

}


.feature-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255,110,187,.17);

    border-radius: 13px;

    color:
        var(--pink);

    background:
        rgba(255,100,180,.05);

}


.feature-card h3 {

    margin:
        22px 0 10px;

}


.feature-card > p {

    color:
        #7b7078;

    font-size: 13px;

    line-height: 1.6;

}


.feature-demo {

    position: absolute;

    left: 24px;

    right: 24px;

    bottom: 24px;

    height: 145px;

    overflow: hidden;

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

    border-radius: 18px;

    background:
        #0a080a;

}


.cursor-demo {

    display: grid;

    place-items: center;

}


.cursor-demo span {

    color: white;

    font-size: 55px;

    text-shadow:

        0 0 22px
        var(--pink);

}


.cursor-demo i {

    position: absolute;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--pink);

    box-shadow:
        0 0 12px
        var(--pink);

}


.cursor-demo i:nth-child(1) {

    left: 30%;

    top: 50%;

}


.cursor-demo i:nth-child(2) {

    left: 23%;

    top: 65%;

    opacity: .7;

}


.cursor-demo i:nth-child(3) {

    left: 17%;

    top: 77%;

    opacity: .4;

}


.background-demo {

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(255,53,162,.3),
            transparent 22%
        ),

        linear-gradient(
            135deg,
            #070707,
            #28101d,
            #09080a
        );

}


.fake-sidebar {

    position: absolute;

    left: 12px;

    top: 12px;

    bottom: 12px;

    width: 80px;

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

    border-radius: 12px;

    background:
        rgba(5,5,5,.35);

}


.anime-shape {

    position: absolute;

    width: 120px;

    height: 190px;

    right: 20px;

    top: 10px;

    border:
        16px solid
        rgba(255,255,255,.07);

    border-radius: 50%;

    transform:
        rotate(25deg);

}


.upload-demo {

    display: grid;

    place-items: center;

    align-content: center;

    gap: 9px;

    border-style: dashed;

}


.upload-demo div {

    width: 55px;

    height: 55px;

    display: grid;

    place-items: center;

    border-radius: 17px;

    color:
        var(--pink);

    background:
        rgba(255,98,181,.06);

    font-size: 25px;

}


.upload-demo span {

    color:
        #61575e;

    font-size: 10px;

    letter-spacing: .12em;

}


/* =========================================
   SPLIT HEADINGS
========================================= */

.split-title {

    margin-bottom: 44px;

    display: grid;

    grid-template-columns:
        1fr 380px;

    align-items: end;

    gap: 40px;

}


.split-title p {

    color:
        #887d85;

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================
   CURSOR LIBRARY
========================================= */

.cursor-library {

    display: grid;

    grid-template-columns:
        repeat(6,1fr);

    gap: 12px;

}


.cursor-card {

    padding:
        12px 12px 16px;

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

    border-radius: 20px;

    background:
        rgba(255,255,255,.018);

    transition:
        .25s ease;

}


.cursor-card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(255,100,180,.3);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.22);

}


.cursor-picture {

    height: 128px;

    display: grid;

    place-items: center;

    border-radius: 15px;

    background:

        radial-gradient(
            circle,
            rgba(255,103,183,.13),
            transparent 42%
        ),

        #0a080a;

    font-size: 44px;

    text-shadow:
        0 0 22px
        var(--pink);

}


.cursor-card strong {

    display: block;

    margin-top: 13px;

    font-size: 12px;

}


.cursor-card > small {

    display: block;

    margin-top: 4px;

    color:
        #665c63;

}


/* =========================================
   BACKGROUNDS
========================================= */

.background-grid {

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 15px;

}


.wallpaper {

    position: relative;

    min-height: 300px;

    overflow: hidden;

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

    border-radius: 24px;

    transition:
        .25s ease;

}


.wallpaper:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,102,182,.24);

}


.bg1 {

    background:

        radial-gradient(
            circle at 75% 35%,
            rgba(255,255,255,.16),
            transparent 14%
        ),

        linear-gradient(
            135deg,
            #030303 0 42%,
            #222226 42% 44%,
            #08080a 44% 67%,
            #27272c 67% 69%,
            #070707 69%
        );

}


.bg2 {

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(255,26,146,.6),
            transparent 18%
        ),

        linear-gradient(
            135deg,
            #070609,
            #310a22,
            #050506
        );

}


.bg3 {

    background:

        repeating-linear-gradient(
            120deg,
            transparent 0 25px,
            rgba(255,255,255,.045) 25px 27px
        ),

        linear-gradient(
            145deg,
            #020202,
            #252529,
            #080808
        );

}


.bg4 {

    background:

        radial-gradient(
            circle at 73% 50%,
            rgba(255,88,179,.18),
            transparent 15%
        ),

        linear-gradient(
            150deg,
            #070607,
            #1b0b15,
            #030303
        );

}


.wallpaper::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            transparent 45%,
            rgba(0,0,0,.75)
        );

}


.wallpaper > div {

    position: absolute;

    left: 22px;

    bottom: 20px;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 10px;

}


.wallpaper span {

    color:
        var(--pink);

    font-size: 10px;

    font-weight: 900;

}


/* =========================================
   INSTALL
========================================= */

.install-box {

    padding: 50px;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    border:
        1px solid
        rgba(255,110,185,.13);

    border-radius: 30px;

    background:

        radial-gradient(
            circle at 10% 10%,
            rgba(255,76,169,.1),
            transparent 25%
        ),

        rgba(255,255,255,.018);

}


.install-left > p {

    max-width: 440px;

    color:
        #887d85;

    line-height: 1.7;

}


.install-left .main-button {

    width: fit-content;

    margin-top: 28px;

}


.steps {

    display: flex;

    flex-direction: column;

}


.step {

    padding:
        18px 0;

    display: grid;

    grid-template-columns:
        48px 1fr;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);

}


.step:last-child {
    border: none;
}


.step > span {

    color:
        var(--pink);

    font-size: 11px;

    font-weight: 900;

}


.step strong {
    font-size: 14px;
}


.step p {

    margin:
        6px 0 0;

    color:
        #70656d;

    font-size: 12px;

}


/* =========================================
   FAQ
========================================= */

.faq-list {

    border-top:
        1px solid
        rgba(255,255,255,.06);

}


.faq-list details {

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

}


.faq-list summary {

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    list-style: none;

    cursor: pointer;

    font-size: 15px;

    font-weight: 650;

}


.faq-list summary::-webkit-details-marker {
    display: none;
}


.faq-list summary span {

    color:
        var(--pink);

    font-size: 22px;

    transition:
        .2s ease;

}


.faq-list details[open]
summary span {

    transform:
        rotate(45deg);

}


.faq-list details p {

    max-width: 750px;

    margin:
        -5px 0 25px;

    color:
        #786d74;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================
   DOWNLOAD SECTION
========================================= */

.download-section {

    position: relative;

    width:

        min(
            1180px,
            calc(100% - 40px)
        );

    margin:
        50px auto 130px;

    padding:
        85px 30px;

    overflow: hidden;

    text-align: center;

    border:
        1px solid
        rgba(255,108,185,.16);

    border-radius: 34px;

    background:
        #0c080b;

}


.download-glow {

    position: absolute;

    width: 500px;

    height: 260px;

    left: 50%;

    top: -150px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        rgba(255,56,160,.2);

    filter:
        blur(90px);

}


.download-section > * {

    position: relative;

    z-index: 2;

}


.download-section > p {

    color:
        #887d85;

}


.final-download {

    min-height: 60px;

    margin-top: 25px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;

    border-radius: 16px;

    color:
        #150b11;

    background:

        linear-gradient(
            135deg,
            #ffa2d4,
            #ff55ab
        );

    box-shadow:

        0 18px 55px
        rgba(255,59,158,.25);

    text-decoration: none;

    font-size: 14px;

    font-weight: 900;

    transition:
        .2s ease;

}


.final-download:hover {

    transform:
        translateY(-4px);

    box-shadow:

        0 24px 70px
        rgba(255,59,158,.35);

}


.download-note {

    display: block;

    margin-top: 15px;

    color:
        #60565d !important;

}


/* =========================================
   FOOTER
========================================= */

footer {

    width:

        min(
            1180px,
            calc(100% - 40px)
        );

    min-height: 130px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid
        rgba(255,255,255,.055);

    color:
        #62585f;

    font-size: 11px;

}


.footer-right {

    display: flex;

    flex-direction: column;

    gap: 6px;

    text-align: right;

}


.footer-right strong {

    color:
        #b5a8b0;

    font-size: 11px;

}


.footer-right span {

    color:
        #62585f;

}


/* =========================================
   CUSTOM WEBSITE CURSOR
========================================= */

.custom-cursor-enabled,
.custom-cursor-enabled body,
.custom-cursor-enabled a,
.custom-cursor-enabled button,
.custom-cursor-enabled summary {

    cursor:
        none !important;

}


.site-cursor {

    position: fixed;

    left: 0;

    top: 0;

    width: 32px;

    height: 32px;

    margin-left: -16px;

    margin-top: -16px;

    z-index: 999999;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity .15s ease,
        scale .12s ease;

}


.site-cursor.visible {
    opacity: 1;
}


.site-cursor-ring {

    position: absolute;

    inset: 0;

    border:
        1px solid
        rgba(255,121,192,.8);

    border-radius: 50%;

    box-shadow:

        0 0 12px
        rgba(255,74,170,.4),

        inset 0 0 10px
        rgba(255,74,170,.08);

    animation:
        cursorSpin
        4s linear infinite;

    transition:
        .18s ease;

}


.site-cursor-ring::before {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    top: -3px;

    left: 50%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #ff78be;

    box-shadow:

        0 0 12px
        #ff55ae;

}


.site-cursor-ring::after {

    content: "";

    position: absolute;

    width: 3px;

    height: 3px;

    bottom: 1px;

    left: 2px;

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:

        0 0 10px
        #ff55ae;

}


.site-cursor-core {

    position: absolute;

    left: 50%;

    top: 50%;

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

    color:
        #fff;

    font-size: 10px;

    text-shadow:

        0 0 5px #fff,

        0 0 12px #ff55ae,

        0 0 22px #ff55ae;

}


.site-cursor.hovering
.site-cursor-ring {

    transform:
        scale(1.45);

    border-color:
        #ff9ed1;

    background:
        rgba(255,85,174,.08);

}


.site-cursor.hovering
.site-cursor-core {

    color:
        #ffb9dc;

}


.site-cursor.clicking {

    scale:
        .72;

}


.site-cursor-glow {

    position: fixed;

    left: 0;

    top: 0;

    width: 90px;

    height: 90px;

    margin-left: -45px;

    margin-top: -45px;

    z-index: 999990;

    pointer-events: none;

    border-radius: 50%;

    opacity: 0;

    background:

        radial-gradient(
            circle,
            rgba(255,82,173,.15),
            rgba(255,82,173,.04) 40%,
            transparent 70%
        );

    filter:
        blur(4px);

    transition:
        opacity .2s ease;

}


.site-cursor-glow.visible {
    opacity: 1;
}


.mouse-sparkle {

    position: fixed;

    z-index: 999995;

    pointer-events: none;

    color:
        #ff79bf;

    opacity: .9;

    text-shadow:

        0 0 6px
        #ff79bf,

        0 0 14px
        #ff4fa9;

    transition:

        transform .65s ease-out,

        opacity .65s ease-out;

}


@keyframes cursorSpin {

    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }

}


/* =========================================
   MOBILE
========================================= */

@media(max-width: 950px) {

    .links {
        display: none;
    }


    .hero {

        grid-template-columns:
            1fr;

        text-align: center;

    }


    .hero-left {

        display: flex;

        flex-direction: column;

        align-items: center;

    }


    .hero-buttons {

        justify-content: center;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .cursor-library {

        grid-template-columns:
            repeat(3,1fr);

    }


    .split-title {

        grid-template-columns:
            1fr;

    }


    .install-box {

        grid-template-columns:
            1fr;

    }

}


@media(max-width: 600px) {

    .nav-shell {

        padding:
            8px 10px 0;

    }


    .nav {
        height: 62px;
    }


    .brand-name {
        font-size: 15px;
    }


    .top-download {

        padding:
            10px 12px;

        font-size: 10px;

    }


    .hero {

        width:
            calc(100% - 20px);

        padding-top:
            70px;

    }


    .hero h1 {
        font-size: 49px;
    }


    .description {
        font-size: 15px;
    }


    .hero-buttons {

        width: 100%;

        flex-direction:
            column;

    }


    .main-button,
    .secondary-button {

        width: 100%;

    }


    .preview {
        height: 310px;
    }


    .presets {

        position: relative;

        top: auto;

        right: auto;

        bottom: auto;

        width: 100%;

        height: 78px;

        flex-direction:
            row;

        border-left: 0;

        border-top:
            1px solid
            rgba(255,255,255,.05);

    }


    .preset {
        flex: 1;
    }


    .controls {

        margin-right: 0;

    }


    .cursor-library {

        grid-template-columns:
            repeat(2,1fr);

    }


    .background-grid {

        grid-template-columns:
            1fr;

    }


    .install-box {

        padding:
            30px 22px;

    }


    footer {

        padding:
            30px 0;

        flex-direction:
            column;

        gap: 20px;

    }


    .footer-right {

        text-align: center;

    }

}


/* Disable custom cursor on touch devices */

@media(pointer: coarse) {

    .site-cursor,
    .site-cursor-glow,
    .mouse-sparkle {

        display:
            none !important;

    }

}