.hero { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 560px; padding: 70px max(24px, calc((100% - 1120px) / 2)); background: #fff1c4; }
.hero-copy { max-width: 530px; }
.hero-copy > p { color: #756a5d; }
.hero-copy h1 { margin: 8px 0 18px; font-size: 56px; line-height: 1.15; }
.hero-copy em { color: #e66f27; font-style: normal; }
.hero-copy .button { margin-right: 12px; }
.button.text { color: #754a31; }
.hero-art img { max-height: 420px; filter: drop-shadow(14px 13px 13px rgba(86,58,22,.2)); }
.section { padding: 76px max(24px, calc((100% - 1120px) / 2)); }
.section-title { text-align: center; }
.section-title p { margin: 0 0 9px; color: #dc6d25; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.section-title h2 { margin: 0; font-size: 31px; }
.benefit-grid { display: flex; gap: 18px; margin-top: 35px; }
.benefit-grid article { flex: 1; padding: 24px; border-top: 3px solid #f7c849; background: #fff; box-shadow: 0 8px 22px rgba(85,64,38,.08); }
.benefit-grid h3 { margin-top: 0; }
.benefit-grid p { color: #756a5e; font-size: 14px; }
.featured { background: #342e29; color: #fff; }
.featured .section-title p { color: #ffdc54; }
.featured > a { display: block; margin-top: 25px; color: #ffdc54; text-align: center; }
.listener-reviews { background: #fff8e8; }
.reviews-intro { max-width: 650px; margin: 12px auto 0; color: #776c62; text-align: center; }
.reviews-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 34px; }
.review-card { min-width: 0; padding: 22px; border-top: 3px solid #f3bd3f; background: #fff; box-shadow: 0 8px 22px rgba(74, 53, 31, .07); }
.review-user { display: flex; align-items: center; gap: 11px; }
.review-user img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.review-user h3 { margin: 0; color: #3e352e; font-size: 15px; }
.review-user span { display: block; color: #9c8d7f; font-size: 11px; }
.review-card blockquote { min-height: 128px; margin: 19px 0 13px; color: #5f554d; font-size: 14px; line-height: 1.85; }
.review-card > p { margin: 0; padding-top: 12px; border-top: 1px solid #eee3d3; color: #c35b1d; font-size: 11px; }
.home-news-section { background: #fffdf8; }
.home-news-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.home-news-heading .section-title { text-align: left; }
.home-news-heading > a { color: #c35b1d; font-size: 13px; font-weight: 700; }
.home-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; }
.home-news-card { overflow: hidden; border: 1px solid #eadfce; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-news-card:hover { transform: translateY(-3px); border-color: #efaa75; box-shadow: 0 12px 26px rgba(70, 49, 29, .09); }
.home-news-image { display: block; height: 190px; overflow: hidden; background: #fff1c4; }
.home-news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.home-news-card:hover .home-news-image img { transform: scale(1.045); }
.home-news-body { padding: 18px; }
.home-news-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #a09182; font-size: 11px; }
.home-news-meta span { color: #d86621; font-weight: 700; }
.home-news-body h3 { display: -webkit-box; overflow: hidden; min-height: 51px; margin: 9px 0; font-size: 17px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-news-body h3 a:hover { color: #dc6d25; }
.home-news-body > p { display: -webkit-box; overflow: hidden; min-height: 66px; margin: 0 0 12px; color: #74695f; font-size: 13px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.home-news-more { color: #c35b1d; font-size: 12px; font-weight: 700; }
.scene-section { background: #fff8e8; }
.scene-flex { display: flex; gap: 18px; margin-top: 34px; }
.scene-flex article { flex: 1; padding: 28px 25px; background: #fffdf8; border-left: 3px solid #f58231; }
.scene-flex span { color: #dc6d25; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.scene-flex h3 { margin: 13px 0 8px; font-size: 20px; }
.scene-flex p { margin: 0; color: #756a5e; font-size: 14px; }
.genre-section { display: flex; align-items: center; gap: 55px; background: #342e29; color: #fff; }
.genre-copy { flex: 1; max-width: 500px; }
.genre-copy > p { color: #ffdc54; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.genre-copy h2 { margin: 8px 0 16px; font-size: 31px; line-height: 1.3; }
.genre-copy > p:not(:first-child) { color: #d7cfc7; letter-spacing: 0; font-weight: 400; }
.genre-grid { display: grid; flex: 1; grid-template-columns: 1fr 1fr; gap: 10px; }
.genre-grid a { min-height: 128px; padding: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); }
.genre-grid a:hover { background: rgba(245,130,49,.25); }
.genre-grid b, .genre-grid span { display: block; }
.genre-grid b { margin-bottom: 8px; color: #ffdc54; font-size: 17px; }
.genre-grid span { color: #dfd5cb; font-size: 13px; }
.home-faq { background: #fff8e8; }
.home-faq-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.home-faq-heading .section-title { text-align: left; }
.home-faq-heading > a { color: #c35b1d; font-size: 13px; font-weight: 700; }
.home-faq-list { max-width: 860px; margin: 32px auto 0; }
@media (max-width: 760px) {
    .scene-flex, .genre-section { display: block; }
    .scene-flex article { margin-bottom: 14px; }
    .genre-copy { margin-bottom: 28px; }
    .genre-copy h2 { font-size: 26px; }
    .genre-grid a { min-height: 112px; }
    .reviews-grid { grid-template-columns: 1fr; }
    .review-card blockquote { min-height: 0; }
    .home-news-heading { align-items: flex-start; }
    .home-news-heading > a { padding-top: 8px; }
    .home-news-grid { grid-template-columns: 1fr; }
    .home-news-image { height: 210px; }
    .home-news-body h3, .home-news-body > p { min-height: 0; }
}
@media (max-width: 760px) { .hero { display: block; min-height: 0; padding-top: 54px; } .hero-copy h1 { font-size: 39px; } .hero-art { margin-top: 35px; text-align: center; } .hero-art img { max-height: 335px; margin: auto; } .benefit-grid { display: block; } .benefit-grid article { margin-bottom: 14px; } .section { padding: 54px 20px; } .section-title h2 { font-size: 26px; } }