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

/* BODY */

body{

background:#f7f7f7;
color:#333;

font-family:
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif;

min-height:100vh;

overflow-x:hidden;

}

/* HEADER */

header{

width:100%;

padding:30px 20px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

background:white;

border-bottom:1px solid #eee;

}

/* LOGO */

.logo{

margin-bottom:25px;

display:flex;

justify-content:center;

align-items:center;

}

.logo img{

width:220px;

max-width:100%;

height:auto;

display:block;

transition:0.3s ease;

}

.logo img:hover{

transform:scale(1.03);

opacity:0.95;

}

/* NAVIGATION */

nav{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:10px;

width:100%;

max-width:700px;

margin:auto;

}

/* BUTTONS */

.btn{

display:flex;

justify-content:center;

align-items:center;

padding:10px 14px;

background:#111;

color:white;

text-decoration:none;

border-radius:12px;

font-size:14px;

font-weight:bold;

transition:0.25s ease;

white-space:nowrap;

min-width:110px;

}

.btn:hover{

transform:translateY(-2px);

opacity:0.9;

}

/* HERO */

.hero{

padding:100px 20px;

text-align:center;

background:white;

}

.hero h1{

font-size:64px;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:#666;

max-width:700px;

margin:auto;

line-height:1.8;

}

/* BEATS GRID */

.beats-grid{

width:90%;

max-width:1200px;

margin:60px auto;

display:grid;

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

justify-content:center;

gap:35px;

}

/* BEAT CARD */

.beat-card{

background:white;

border-radius:18px;

padding:20px;

border:1px solid #eee;

box-shadow:0 4px 12px rgba(0,0,0,0.05);

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:15px;

width:300px;

max-width:300px;

overflow:hidden;

transition:0.25s ease;

}

.beat-card:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:0 12px 28px rgba(0,0,0,0.12);

}

/* BEAT IMAGE */

.beat-card img{

display:block;

width:220px !important;
height:220px !important;

min-width:220px !important;
min-height:220px !important;

max-width:220px !important;
max-height:220px !important;

object-fit:cover;

border-radius:14px;

flex-shrink:0;

}

/* TITLE */

.beat-card h2{

font-size:24px;

line-height:1.4;

}

/* AUDIO PLAYER */

audio{

width:220px;

max-width:220px;

display:block;

}

/* PRICE */

.beat-card p{

font-size:18px;

font-weight:bold;

color:#111;

}

/* FOOTER */

footer{

margin-top:100px;

padding:40px;

text-align:center;

background:white;

border-top:1px solid #eee;

font-size:14px;

color:#777;

}

/* FADE IN */

@keyframes fadeUp{

from{

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

}

to{

opacity:1;
transform:translateY(0);

}

}

.hero,
.beat-card,
.song-card{

animation:fadeUp 0.6s ease;

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#111;
border-radius:10px;

}

/* SECTION SPACING */

section{

margin-bottom:40px;

}

/* MOBILE */

@media(max-width:768px){

header{

padding:25px 15px;

}

.logo img{

width:180px;

}

nav{

gap:8px;

justify-content:center;

}

.btn{

font-size:13px;

padding:10px 12px;

min-width:100px;

}

.hero{

padding:70px 20px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.beats-grid{

width:95%;

gap:25px;

}

.beat-card{

width:260px;

max-width:260px;

padding:18px;

}

.beat-card img{

width:180px !important;
height:180px !important;

min-width:180px !important;
min-height:180px !important;

max-width:180px !important;
max-height:180px !important;

}

audio{

width:180px;

max-width:180px;

}

.beat-card h2{

font-size:20px;

}

}