* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Cambria', Georgia, serif; line-height: 1.7; color: #5a2a2a; background: linear-gradient(to bottom, #fff8f5 0%, #fce8e0 50%, #f8d8d0 100%);}
.container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.navbar {background: linear-gradient(to right, #c54b4b 0%, #a53a3a 100%); padding: 1.3rem 0; box-shadow: 0 6px 22px rgba(197, 75, 75, 0.4); position: sticky; top: 0; z-index: 1000;}
.navbar .container {display: flex; justify-content: space-between; align-items: center;}
.logo h1 {color: white; font-size: 2.3rem; font-weight: 700; letter-spacing: 2px;}
.nav-links {display: flex; list-style: none; gap: 2.3rem;}
.nav-links a {color: #fce8e0; text-decoration: none; font-weight: 600; transition: all 0.3s; font-size: 0.95rem;}
.nav-links a:hover {color: white;}
.hero {background: linear-gradient(135deg, #d55b5b 0%, #c54b4b 100%); color: white; padding: 115px 20px; text-align: center;}
.hero-content h2 {font-size: 3.2rem; margin-bottom: 1.3rem; font-weight: 700;}
.hero-content p {font-size: 1.25rem; margin-bottom: 2.3rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.cta-button {display: inline-block; background: white; color: #a53a3a; padding: 17px 48px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.15rem; transition: all 0.3s; border: 3px solid #f8d8d0;}
.cta-button:hover {transform: translateY(-6px); background: #fff8f5; box-shadow: 0 12px 35px rgba(0,0,0,0.25);}
.recipes-section {padding: 85px 20px;}
.section-title {text-align: center; font-size: 3rem; margin-bottom: 3.5rem; color: #a53a3a; font-weight: 700;}
.recipe-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2.5rem;}
.recipe-card {background: white; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 32px rgba(197, 75, 75, 0.2); transition: all 0.3s; border: 3px solid #f8d8d0; cursor: pointer;}
.recipe-card:hover {transform: translateY(-10px); box-shadow: 0 18px 48px rgba(197, 75, 75, 0.3);}
.recipe-card img {width: 100%; height: 250px; object-fit: cover;}
.recipe-content {padding: 2rem;}
.recipe-content h3 {font-size: 1.5rem; margin-bottom: 0.7rem; color: #a53a3a; font-weight: 700;}
.recipe-content p {color: #7a4a4a; margin-bottom: 1.2rem;}
.recipe-meta {display: flex; gap: 1.8rem; color: #c54b4b; font-weight: 600;}
.view-recipe-btn {margin-top: 1.2rem; padding: 13px 32px; background: linear-gradient(to right, #d55b5b 0%, #c54b4b 100%); color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-family: inherit;}
.view-recipe-btn:hover {transform: scale(1.05); box-shadow: 0 8px 25px rgba(213, 91, 91, 0.4);}
.recipe-details {max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; background: #fff8f5; border-radius: 12px;}
.recipe-details.active {max-height: 2000px; transition: max-height 0.8s ease-in; padding: 2.5rem 2rem; margin-top: 1.2rem;}
.recipe-section {margin-bottom: 2rem;} .recipe-section:last-child {margin-bottom: 0;}
.recipe-section h4 {color: #a53a3a; font-size: 1.3rem; margin-bottom: 1.2rem; font-weight: 700;}
.recipe-section ul, .recipe-section ol {padding-left: 1.8rem; color: #5a2a2a;}
.recipe-section li {margin-bottom: 0.8rem; line-height: 1.7;}
footer {background: linear-gradient(to right, #c54b4b 0%, #a53a3a 100%); color: #fce8e0; padding: 4rem 20px 2rem;}
.footer-content {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2.5rem; margin-bottom: 2.5rem;}
.footer-section h3, .footer-section h4 {margin-bottom: 1.2rem; color: white; font-weight: 700;}
.footer-section ul {list-style: none;} .footer-section ul li {margin-bottom: 0.7rem;}
.footer-section a {color: #f8d8d0; text-decoration: none; transition: color 0.3s;} .footer-section a:hover {color: white;}
.copyright {text-align: center; padding-top: 2.5rem; border-top: 2px solid rgba(252, 232, 224, 0.3);}
@media (max-width: 768px) {.navbar .container {flex-direction: column; gap: 1rem;} .nav-links {flex-wrap: wrap; justify-content: center; gap: 1rem;} .hero-content h2 {font-size: 2.2rem;} .recipe-grid {grid-template-columns: 1fr;} .section-title {font-size: 2.2rem;}}