/* responsive.css */
@media (max-width:1200px){
.container{width:92%}
.hero-grid,.about-grid,.guarantee-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:992px){
.nav{flex-direction:column;gap:16px}
nav ul{flex-wrap:wrap;justify-content:center}
.hero-grid,.about-grid,.guarantee-grid{grid-template-columns:1fr;text-align:center}
.hero-image{order:-1}
.benefit-grid,.ingredient-grid,.work-grid,.pricing-grid,.review-grid,.footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
section{padding:70px 0}
.logo img{max-height:52px}
.hero h1{font-size:2rem}
.section-title h2{font-size:1.8rem}
nav ul{flex-direction:column;gap:12px}
.benefit-grid,.ingredient-grid,.work-grid,.pricing-grid,.review-grid,.footer-grid{
grid-template-columns:1fr}
.btn{display:block;width:100%;text-align:center}
.price-card.featured{transform:none}
}
@media (max-width:576px){
.container{width:94%}
body{font-size:15px}
.hero h1{font-size:1.7rem}
.hero p,.about p{font-size:.95rem}
img{height:auto}
.faq-question{font-size:16px;padding:16px}
}
@media (max-width:400px){
.hero h1{font-size:1.5rem}
.section-title h2{font-size:1.5rem}
.btn{padding:12px 18px}
}