* {margin: 0; padding: 0; box-sizing: border-box;}
body {font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.7; color: #5a3a4a; background: linear-gradient(to bottom, #fff5f8 0%, #ffe0e8 50%, #ffd0d8 100%);}
.container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.navbar {background: linear-gradient(to right, #e07a8a 0%, #d06a7a 100%); padding: 1.3rem 0; box-shadow: 0 6px 22px rgba(224, 122, 138, 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: #ffe0e8; 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, #f08a9a 0%, #e07a8a 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: #d06a7a; padding: 17px 48px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 1.15rem; transition: all 0.3s; border: 3px solid #ffd0d8;}
.cta-button:hover {transform: translateY(-6px); background: #fff5f8; 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: #d06a7a; 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(224, 122, 138, 0.2); transition: all 0.3s; border: 3px solid #ffd0d8; cursor: pointer;}
.recipe-card:hover {transform: translateY(-10px); box-shadow: 0 18px 48px rgba(224, 122, 138, 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: #d06a7a; font-weight: 700;}
.recipe-content p {color: #7a5a6a; margin-bottom: 1.2rem;}
.recipe-meta {display: flex; gap: 1.8rem; color: #e07a8a; font-weight: 600;}
.view-recipe-btn {margin-top: 1.2rem; padding: 13px 32px; background: linear-gradient(to right, #f08a9a 0%, #e07a8a 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(240, 138, 154, 0.4);}
.recipe-details {max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; background: #fff5f8; 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: #d06a7a; font-size: 1.3rem; margin-bottom: 1.2rem; font-weight: 700;}
.recipe-section ul, .recipe-section ol {padding-left: 1.8rem; color: #5a3a4a;}
.recipe-section li {margin-bottom: 0.8rem; line-height: 1.7;}
footer {background: linear-gradient(to right, #e07a8a 0%, #d06a7a 100%); color: #ffe0e8; 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: #ffd0d8; 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(255, 224, 232, 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;}}