/* =========================
   SPURDEL COMING SOON
   Premium UI
========================= */

@font-face {
    font-family: 'Coolvetica';
    src: url('fonts/Coolvetica-Regular.woff2') format('woff2');
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Outfit',sans-serif;
    background:#080808;
    color:#fff;
    overflow-x:hidden;

overflow-y:auto;
    height:100vh;
    position:relative;

}

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

body::before{

content:"";

position:fixed;
inset:0;

background:
radial-gradient(circle at top left,#6D28D9 0%,transparent 30%),
radial-gradient(circle at bottom right,#4F46E5 0%,transparent 35%),
linear-gradient(135deg,#050505,#101010);

z-index:-5;

animation:bgMove 15s ease infinite alternate;

}

@keyframes bgMove{

0%{

filter:hue-rotate(0deg);

}

100%{

filter:hue-rotate(25deg);

}

}

/*====================
GRID
=====================*/

.grid{

position:fixed;
inset:0;

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:60px 60px;

mask-image:linear-gradient(transparent,black,transparent);

z-index:-4;

opacity:.5;

}

/*====================
FLOATING BLOBS
=====================*/

.blob{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.45;

animation:blobMove 18s ease-in-out infinite;

}

.blob1{

width:350px;
height:350px;

background:#7c3aed;

top:-120px;
left:-100px;

}

.blob2{

width:300px;
height:300px;

background:#2563eb;

right:-120px;
bottom:-80px;

animation-delay:5s;

}

.blob3{

width:240px;
height:240px;

background:#9333ea;

left:45%;
top:55%;

animation-delay:10s;

}

@keyframes blobMove{

0%{

transform:
translate(0,0)
scale(1);

}

50%{

transform:
translate(70px,-60px)
scale(1.25);

}

100%{

transform:
translate(0,0)
scale(1);

}

}

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

.hero{

width:100%;
height:auto;

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

padding:30px;

}

/*====================
GLASS CARD
=====================*/

.glass{

width:100%;
max-width:720px;

padding:70px 60px;

text-align:center;

border-radius:30px;

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

backdrop-filter:blur(25px);

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

box-shadow:

0 20px 60px rgba(0,0,0,.45),
0 0 100px rgba(124,58,237,.15);

position:relative;

overflow:hidden;

animation:cardEnter 1.2s ease;

}

.glass::before{

content:"";

position:absolute;

width:280px;
height:280px;

background:radial-gradient(circle,
rgba(255,255,255,.12),
transparent 70%);

top:-120px;
right:-120px;

animation:rotateGlow 14s linear infinite;

}

@keyframes rotateGlow{

100%{

transform:rotate(360deg);

}

}

@keyframes cardEnter{

from{

opacity:0;
transform:translateY(50px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/*====================
LOGO
=====================*/

.logo{

width:170px;

margin-bottom:30px;

animation:logoFloat 5s ease infinite;

}

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

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

.badge{

display:inline-flex;
align-items:center;
justify-content:center;

padding:10px 22px;

margin-bottom:28px;

border-radius:50px;

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

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

font-size:14px;
font-weight:500;

letter-spacing:2px;
text-transform:uppercase;

backdrop-filter:blur(20px);

animation:badgePulse 2s infinite;

}

@keyframes badgePulse{

0%,100%{

box-shadow:0 0 0 rgba(124,58,237,0);

}

50%{

box-shadow:0 0 30px rgba(124,58,237,.3);

}

}

/*====================
HEADING
=====================*/

h1{

font-family:'Coolvetica',sans-serif;

font-size:72px;

line-height:1;

letter-spacing:2px;

margin-bottom:30px;

font-weight:400;

}

h1 span{

background:linear-gradient(
90deg,
#ffffff,
#9d6cff,
#ffffff,
#6d28d9,
#ffffff);

background-size:300%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:gradientText 8s linear infinite;

}

@keyframes gradientText{

100%{

background-position:300%;

}

}

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

p{

max-width:560px;

margin:auto;

font-size:18px;

line-height:1.8;

opacity:.75;

}

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

.buttons{

margin-top:45px;

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.btn{

padding:16px 34px;

border-radius:60px;

background:#7c3aed;

color:white;

text-decoration:none;

font-weight:600;

transition:.4s;

position:relative;

overflow:hidden;

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(124,58,237,.4);

}

.btn::before{

content:"";

position:absolute;

left:-100%;
top:0;

width:100%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.3),
transparent);

transition:.7s;

}

.btn:hover::before{

left:100%;

}

.outline{

background:transparent;

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

}

.outline:hover{

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

}

/*====================
SOCIAL
=====================*/

.social{

margin-top:60px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.social a{

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

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

color:white;

font-size:22px;

text-decoration:none;

transition:.45s;

backdrop-filter:blur(15px);

}

.social a:hover{

background:#7c3aed;

transform:translateY(-10px) rotate(360deg);

box-shadow:0 20px 35px rgba(124,58,237,.45);

}

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

.cursor{

position:fixed;

width:24px;
height:24px;

border-radius:50%;

background:rgba(124,58,237,.35);

backdrop-filter:blur(8px);

pointer-events:none;

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

transition:
left .08s linear,
top .08s linear,
transform .25s;

z-index:9999;

box-shadow:

0 0 30px rgba(124,58,237,.6);

}

/*====================
RESPONSIVE
=====================*/

@media(max-width:991px){

.glass{

padding:55px 35px;

}

.logo{

width:150px;

}

h1{

font-size:56px;

}

p{

font-size:17px;

}

}

@media(max-width:768px){

.glass{

padding:45px 25px;

}

.logo{

width:130px;

}

h1{

font-size:44px;

}

.buttons{

flex-direction:column;

}

.btn{

width:100%;

}

.social{

gap:14px;

}

.social a{

width:50px;
height:50px;

font-size:20px;

}

}

@media(max-width:480px){

body{

overflow:auto;

}

.hero{

padding:20px;

}

.glass{

padding:35px 20px;

border-radius:22px;

}

.logo{

width:110px;

}

.badge{

font-size:12px;

padding:8px 18px;

}

h1{

font-size:34px;

}

p{

font-size:15px;

line-height:1.7;

}

}