/* EMIX Sections - About, Services, Products */
.about-section { background: var(--color-white); position: relative; overflow: hidden; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.about-image { border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); position: relative; }
.about-image img { width: 100%; height: 450px; object-fit: cover; transition: transform var(--transition-slower); }
.about-image:hover img { transform: scale(1.05); }
.about-image-badge { position: absolute; bottom: var(--space-6); left: var(--space-6); background: var(--gradient-gold); color: var(--color-green-darkest); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xl); font-weight: var(--font-bold); box-shadow: var(--shadow-gold-lg); display: flex; align-items: center; gap: var(--space-2); }
.about-image-badge span { font-family: var(--font-english); font-size: var(--text-3xl); font-weight: var(--font-extrabold); line-height: 1; }
.about-text h2 { margin-bottom: var(--space-6); }
.about-text .highlight { color: var(--color-gold); }
.about-text p { font-size: var(--text-lg); line-height: var(--line-height-loose); margin-bottom: var(--space-6); }
.about-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-8) 0; }
.about-feature { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); transition: background var(--transition-base); }
.about-feature:hover { background: var(--color-green-pale); }
.about-feature-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-green-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-green-dark); }
.about-feature-icon svg { width: 22px; height: 22px; }
.about-feature span { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--color-gray-700); }

/* Services */
.services-section { background: var(--gradient-warm); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.service-card { background: var(--color-white); border-radius: var(--radius-2xl); padding: var(--space-8); text-align: center; box-shadow: var(--shadow-card); transition: all var(--transition-base); position: relative; overflow: hidden; border: 1px solid transparent; }
.service-card::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: var(--gradient-gold); transform: scaleX(0); transform-origin: right; transition: transform var(--transition-base); }
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: rgba(196,154,42,0.1); }
.service-icon { width: 80px; height: 80px; margin: 0 auto var(--space-6); background: var(--color-green-pale); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; transition: all var(--transition-base); }
.service-card:hover .service-icon { background: var(--gradient-green); transform: scale(1.1) rotate(-5deg); }
.service-icon svg { width: 36px; height: 36px; color: var(--color-green-dark); transition: color var(--transition-base); }
.service-card:hover .service-icon svg { color: var(--color-white); }
.service-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.service-card p { font-size: var(--text-sm); color: var(--color-gray-500); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); }
.service-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-gold-dark); font-weight: var(--font-semibold); font-size: var(--text-sm); transition: all var(--transition-base); }
.service-link:hover { color: var(--color-green-dark); gap: var(--space-3); }
.service-link svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
.service-link:hover svg { transform: translateX(-4px); }

/* Products */
.products-section { background: var(--color-white); }
.products-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }
.filter-btn { padding: var(--space-2) var(--space-5); border: 2px solid var(--color-gray-200); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-600); transition: all var(--transition-base); cursor: pointer; background: transparent; }
.filter-btn:hover, .filter-btn.active { border-color: var(--color-green-dark); background: var(--color-green-dark); color: var(--color-white); }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.product-card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); transition: all var(--transition-base); border: 1px solid var(--color-gray-100); position: relative; }
.product-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-6px); }
.product-badges { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); z-index: 2; }
.product-badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: 11px; font-weight: var(--font-bold); }
.product-badge-new { background: var(--color-green-dark); color: var(--color-white); }
.product-badge-sale { background: var(--color-error); color: var(--color-white); }
.product-badge-best { background: var(--color-gold); color: var(--color-green-darkest); }
.product-img-wrapper { position: relative; height: 260px; overflow: hidden; background: var(--color-gray-50); }
.product-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slower); }
.product-card:hover .product-img-wrapper img { transform: scale(1.08); }
.product-actions { position: absolute; bottom: 0; right: 0; left: 0; display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-4); background: linear-gradient(to top, rgba(0,0,0,0.4), transparent); transform: translateY(100%); transition: transform var(--transition-base); }
.product-card:hover .product-actions { transform: translateY(0); }
.product-action-btn { width: 40px; height: 40px; background: var(--color-white); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--color-green-darkest); transition: all var(--transition-base); box-shadow: var(--shadow-md); }
.product-action-btn:hover { background: var(--color-gold); transform: scale(1.1); }
.product-action-btn svg { width: 18px; height: 18px; }
.product-info { padding: var(--space-5); }
.product-category { font-size: var(--text-xs); color: var(--color-gold-dark); font-weight: var(--font-semibold); letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-2); }
.product-name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-gray-800); margin-bottom: var(--space-2); line-height: var(--line-height-tight); }
.product-name a:hover { color: var(--color-green-dark); }
.product-price { display: flex; align-items: center; gap: var(--space-2); }
.product-price .current { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-green-dark); }
.product-price .old { font-size: var(--text-sm); color: var(--color-gray-400); text-decoration: line-through; }

@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .services-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .about-image img { height: 300px; }
  .about-features { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .products-grid { grid-template-columns: 1fr; }
}