:root{

    --glass-bg:
        rgba(22,22,25,.55);

    --glass-border-top:
        rgba(0,4,251,.45);

    --glass-border-bottom:
        rgba(189,73,209,.10);

    --glass-highlight:
        rgba(255,255,255,.18);

    --glass-shadow:
        rgba(0,0,0,.45);

    --glass-glow-blue:
        rgba(82,150,255,.16);

    --glass-glow-purple:
        rgba(154,92,255,.16);

    --glass-radius: 
    32px;

    --glass-blur:20px;

}

/* ============================ */

.glass-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px 32px;
    border-radius:var(--glass-radius);
    border:0;
    overflow:hidden;
    cursor:pointer;
    isolation:isolate;
    text-decoration:none;
    color:var(--white);
    font-size:1rem;
    font-weight:400;
    letter-spacing:.2px;
    transition:.45s cubic-bezier(.19,1,.22,1);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.08);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%)brightness(1.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -12px 20px rgba(0,0,0,.38), inset 0 0 40px rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.30), 0 18px 60px rgba(0,0,0,.45);
}
.glass-btn.newsletter-btn{
    box-shadow: none;
}

/* ============================ */

.glass-btn .glass-content{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    z-index:50;
}

.glass-btn .btn-text{
    white-space:nowrap;
}

.glass-btn .btn-icon{
    display:flex;
    align-items:center;
    justify-content:center;
}

.glass-btn svg{
    width:18px;
    height:18px;
    stroke:currentColor;
    stroke-width:2.2;
    fill:none;
    transition:.35s;
}

/* ============================ */
/* Glass Glow Layer */
/* ============================ */

.glass-glow{
    position:absolute;
    inset:-35%;
    z-index:0;
    opacity:.35;
    filter:blur(60px);
    background:
        radial-gradient(
        circle at 25% 30%,
        var(--glass-glow-blue),
        transparent 45%
        ),
        radial-gradient(
        circle at 75% 70%,
        var(--glass-glow-purple),
        transparent 45%
        );

}

/* ============================ */
/* Glass Border */
/* ============================ */

.glass-border{
    position:absolute;    
    inset:0;
    border-radius:inherit;
    padding:2px;
    z-index:2;
    background: linear-gradient(160deg, var(--glass-border-top), var(--glass-border-bottom));

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
}

/* ============================ */
/* Glass Highlight */
/* ============================ */

.glass-highlight {
	position: absolute;
	left: 15px;
	bottom: -4px;
	width: 110%;
	height: 15%;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255,255,255,.30), transparent);
	filter: blur(10px);
	opacity: .9;
	z-index: 3;
}


/*=========================================
    Noise Layer
=========================================*/

.glass-noise{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    opacity:.035;
    z-index:4;
    pointer-events:none;
    background-image:
        radial-gradient(circle at 25% 25%, rgba(255,255,255,.22) 1px, transparent 1px),
        radial-gradient(circle at 75% 45%, rgba(255,255,255,.18) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,.15) 1px, transparent 1px),
        radial-gradient(circle at 80% 85%, rgba(255,255,255,.20) 1px, transparent 1px);

    background-size:
        18px 18px,
        22px 22px,
        26px 26px,
        30px 30px;

}


/*=========================================
    Shine Layer
=========================================*/

.glass-shine{

    position:absolute;

    top:-120%;

    left:-45%;

    width:40%;

    height:320%;

    z-index:6;

    pointer-events:none;

    transform:rotate(22deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.22),

            rgba(255,255,255,.06),

            transparent

        );

    filter:blur(10px);

    transition:1.2s ease;

}


/*=========================================
    Floating Glow
=========================================*/

.glass-btn::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:180px;

    height:180px;

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

    border-radius:50%;

    z-index:0;

    opacity:.18;

    filter:blur(45px);

    /* background:

        radial-gradient(circle,

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

            rgba(140,90,255,.15),

            transparent 70%

        ); */

}


/*=========================================
    Hover State
=========================================*/

.glass-btn:hover{

    transform:

        translateY(-2px)

        scale(1.015);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.16),

        inset 0 -12px 18px rgba(0,0,0,.30),

        0 0 25px rgba(90,140,255,.18),

        0 0 45px rgba(150,90,255,.15),

        0 25px 80px rgba(0,0,0,.45);

}


/*=========================================
    Hover Shine
=========================================*/

.glass-btn:hover .glass-shine{

    left:145%;

}


/*=========================================
    Hover Glow
=========================================*/

.glass-btn:hover .glass-glow{

    opacity:.65;

    transform:scale(1.15);

}


/*=========================================
    Icon Animation
=========================================*/

.glass-btn:hover svg{

    transform:

        translateX(4px)

        rotate(-6deg);

}


/*=========================================
    Active
=========================================*/

.glass-btn:active{

    transform:

        scale(.98);

}


/*=========================================
    Smooth Animation
=========================================*/

.glass-btn,
.glass-btn span,
.glass-btn svg,
.glass-glow,
.glass-highlight,
.glass-border,
.glass-noise,
.glass-shine{

    transition:
        all 1s cubic-bezier(.19,1,.22,1);
}

/*=========================================
    Glass Refraction Layer
=========================================*/

.glass-btn{

    position:relative;

}

.glass-btn .glass-refraction{

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    z-index:5;

    opacity:.55;

    background:

        radial-gradient(
            circle at 18% 18%,
            rgba(255,255,255,.10),
            transparent 28%
        ),

        radial-gradient(
            circle at 82% 25%,
            rgba(120,180,255,.08),
            transparent 26%
        ),

        radial-gradient(
            circle at 70% 82%,
            rgba(180,110,255,.08),
            transparent 30%
        );

}


/*=========================================
    Edge Lighting
=========================================*/

.glass-btn{
    outline:1px solid rgba(255,255,255,.4);
    outline-offset:-1px;
}

.glass-btn:hover{
    outline-color:rgba(255,255,255,.6);
}


/*=========================================
    Premium Reflection
=========================================*/

.glass-btn .glass-highlight{
    mix-blend-mode:screen;
}

.glass-btn:hover .glass-highlight{
    opacity:1;
    transform:
        translateY(-1px)
        scaleX(1.03);
}


/*=========================================
    Refraction Animation
=========================================*/

@keyframes glassFloat{

    0%{

        transform:
            translateY(0px);
    }

    50%{

        transform:
            translateY(-2px);
    }

    100%{

        transform:
            translateY(0px);
    }

}

.glass-btn{
    animation:
        glassFloat 5s ease-in-out infinite;
}


/*=========================================
    Hover Bloom
=========================================*/

.glass-btn:hover::after{
    opacity:.30;
    transform:
        translate(-50%,-50%)
        scale(1.35);
}


/*=========================================
    Glass Content
=========================================*/
.glass-content{
    position:relative;
    z-index:20;
    display:flex;
    align-items:center;
    gap:12px;
}


/*=========================================
    Small Button
=========================================*/

.glass-btn-sm{
    padding:12px 22px;
    font-size:14px;
}


/*=========================================
    Large Button
=========================================*/

.glass-btn-lg{
    padding:22px 42px;
    font-size:20px;
}


/*=========================================
    Blue Variant
=========================================*/

.glass-btn-primary{
    --glass-border-top:
        rgba(110,180,255,.22);
    --glass-border-bottom:
        rgba(70,120,255,.18);

}


/*=========================================
    Purple Variant
=========================================*/

.glass-btn-purple{

    --glass-border-top:

        rgba(180,150,255,.20);

    --glass-border-bottom:

        rgba(145,92,255,.22);

}


/*=========================================
    Light Variant
=========================================*/

.glass-btn-light{

    color:#111;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.60),

            rgba(255,255,255,.25)

        );

}


/*=========================================
    Disabled
=========================================*/

.glass-btn.disabled,

.glass-btn:disabled{

    opacity:.45;

    pointer-events:none;

}


/*=========================================
    Focus
=========================================*/

.glass-btn:focus-visible{

    box-shadow:

        0 0 0 3px rgba(110,180,255,.25),

        0 0 0 6px rgba(145,92,255,.12);

}

.glass-btn.get-started-btn {
	padding: 16px 40px;
	font-size: 1.25rem;
	gap: 15px;
}
.glass-btn.get-started-btn svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2.2;
	fill: none;
	transition: .35s;
}