:root {
--font-main: "Yu Gothic", sans-serif;
}

body {
margin: 0;
font-family: var(--font-main);
color: #333;
line-height: 1.7;
}

header.hero {
background: #222;
color: #fff;
text-align: center;
padding: 40px 20px;
}

header.hero h1 {
margin: 0;
font-size: 2.4rem;
}

.intro,
.features,
.video-section,
.price,
.shop {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}

.intro img.main-image {
width: 100%;
max-width: 600px;
display: block;
margin: 20px auto;
}

.features ul {
padding-left: 20px;
}

.promo-video {
width: 100%;
max-width: 800px;
display: block;
margin: 20px auto;
}

.price-text {
font-size: 1.8rem;
font-weight: bold;
text-align: center;
margin-top: 10px;
}

.shop-btn {
display: inline-block;
background: #0078d4;
color: #fff;
padding: 12px 26px;
text-decoration: none;
border-radius: 6px;
font-size: 1.1rem;
}

.shop-btn:hover {
background: #005fa3;
}

.footer {
background: #eee;
text-align: center;
padding: 20px;
font-size: 0.9rem;
}