@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@700;800&display=swap');

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

body{
    font-family:'Inter',sans-serif;

    background:
    radial-gradient(circle at top left,
    rgba(29,185,84,.15),
    transparent 30%),

    radial-gradient(circle at top right,
    rgba(139,92,246,.15),
    transparent 30%),

    #0a0a0a;

    color:white;

    overflow-x:hidden;

    position:relative;
}

/* Background Glow Effects */

body::before{
    content:"";

    position:fixed;

    width:500px;
    height:500px;

    background:#1DB954;

    filter:blur(180px);

    opacity:.12;

    top:-150px;
    left:-150px;

    z-index:-1;
}

body::after{
    content:"";

    position:fixed;

    width:500px;
    height:500px;

    background:#8b5cf6;

    filter:blur(180px);

    opacity:.12;

    bottom:-150px;
    right:-150px;

    z-index:-1;
}

/* Hero Section */

.hero{
    min-height:100vh;

    display:flex;

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

    text-align:center;

    padding:clamp(20px,5vw,60px);
}

.hero-content{
    width:min(100%,900px);
}

/* Logo */

.logo{

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(3.5rem,10vw,6.5rem);

    font-weight:800;

    letter-spacing:4px;

    margin-bottom:20px;

    background:linear-gradient(
    135deg,
    #1DB954,
    #8b5cf6
    );

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

/* Optional Badge */

.badge{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:30px;

    border-radius:999px;

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

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

    color:#d4d4d8;

    font-size:.9rem;
}

/* Heading */

.hero h2{

    font-size:clamp(2rem,5vw,4rem);

    line-height:1.1;

    font-weight:800;

    margin-bottom:25px;
}

/* Paragraph */

.hero p{

    width:min(90%,650px);

    margin:auto;

    color:#a1a1aa;

    font-size:clamp(.95rem,2vw,1.2rem);

    line-height:1.8;

    margin-bottom:45px;
}

/* Spotify Button */

.spotify-btn{

    display:inline-block;

    text-decoration:none;

    color:white;

    background:#1DB954;

    padding:18px 42px;

    border-radius:999px;

    font-weight:700;

    transition:all .3s ease;
}

.spotify-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 40px rgba(29,185,84,.45);
}

/* Features Section */

.features{

    width:90%;

    max-width:1200px;

    margin:0 auto 120px;

    display:grid;

    grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px,1fr)
    );

    gap:25px;
}

/* Glass Cards */

.card{

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

    backdrop-filter:blur(20px);

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

    border-radius:24px;

    padding:35px;

    transition:all .3s ease;
}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(29,185,84,.4);

    box-shadow:
    0 20px 50px rgba(0,0,0,.35);
}

.card h3{

    font-size:1.4rem;

    margin-bottom:15px;
}

.card p{

    color:#9ca3af;

    line-height:1.7;
}

/* Mobile */

@media(max-width:768px){

    .hero{
        min-height:auto;
        padding-top:100px;
        padding-bottom:100px;
    }

    .spotify-btn{

        width:100%;

        max-width:320px;
    }

    .features{
        width:92%;
    }
}