*{
box-sizing:border-box;
}

body{
margin:0;
font-family:
"Noto Sans TC",
Arial,
sans-serif;
color:#222;
background:#fff;
}


header{

height:80px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 60px;
border-bottom:1px solid #eee;

}


.logo{

font-size:32px;
font-weight:700;
letter-spacing:3px;

}


nav a{

margin:0 15px;
text-decoration:none;
color:#333;

}


.hero{

height:520px;

background:
linear-gradient(
135deg,
#f5f5f5,
#ffffff
);

display:flex;
align-items:center;
padding-left:80px;

}


.hero h1{

font-size:72px;
line-height:1;

}


.hero p{

font-size:24px;

}


button{

padding:14px 35px;
border:none;
background:#111;
color:white;
border-radius:30px;
cursor:pointer;

}


.products{

padding:60px;

}


.products h2,
.live h2,
.about h2{

text-align:center;
font-size:36px;

}


.product-grid{

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

gap:30px;

}


.product-card{

border:1px solid #eee;
padding:25px;
border-radius:20px;

}


.price{

font-size:24px;
font-weight:bold;

}



.live{

padding:70px;
background:#fafafa;
text-align:center;

}



.about{

padding:70px;
text-align:center;

}



footer{

padding:30px;
text-align:center;
background:#111;
color:white;

}