/* ===== HERO ===== */
.hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #1A0A0E 0%, #3D0B1A 40%, #C41E3A 100%); }
.hero-bg-pattern { position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, white 0, white 1px, transparent 0, transparent 50%); background-size: 20px 20px; }
.hero-bg-circle { position: absolute; border-radius: 50%; background: rgba(212, 175, 55, 0.1); }
.hero-bg-circle-1 { width: 600px; height: 600px; top: -200px; right: -100px; }
.hero-bg-circle-2 { width: 300px; height: 300px; bottom: -100px; left: 10%; }
.hero-content { position: relative; z-index: 1; max-width: 600px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(212, 175, 55, 0.2); border: 1px solid rgba(212, 175, 55, 0.4); color: var(--color-secondary); padding: 6px var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-5); letter-spacing: 0.5px; }
.hero-title { font-size: var(--font-size-5xl); font-weight: 900; color: white; line-height: 1.1; margin-bottom: var(--space-5); }
.hero-title em { color: var(--color-secondary); font-style: normal; }
.hero-desc { font-size: var(--font-size-lg); color: rgba(255,255,255,0.8); line-height: var(--line-height-relaxed); margin-bottom: var(--space-8); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-stats { display: flex; gap: var(--space-8); margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,0.15); }
.hero-stat-value { font-size: var(--font-size-2xl); font-weight: 900; color: white; }
.hero-stat-label { font-size: var(--font-size-xs); color: rgba(255,255,255,0.6); margin-top: 2px; }

/* Hero visual side */
.hero-visual { position: absolute; right: 0; top: 0; bottom: 0; width: 45%; display: flex; align-items: center; justify-content: center; }
.hero-product-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-8); }
.hero-product-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-xl); padding: var(--space-4); text-align: center; transition: transform var(--transition-base); }
.hero-product-card:hover { transform: translateY(-4px); }
.hero-product-card:nth-child(2) { margin-top: var(--space-6); }
.hero-product-card:nth-child(4) { margin-top: var(--space-6); }
.hero-product-emoji { font-size: 48px; margin-bottom: var(--space-2); }
.hero-product-img { width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; margin: 0 auto var(--space-2); }
.hero-product-img img { width: 100%; height: 100%; object-fit: cover; }
.hero-product-name { font-size: var(--font-size-xs); color: rgba(255,255,255,0.9); font-weight: 600; }
.hero-product-price { font-size: var(--font-size-sm); color: var(--color-secondary); font-weight: 700; margin-top: 2px; }

/* ===== CAROUSEL ===== */
.carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.carousel-track { display: flex; transition: transform var(--transition-slow); }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast); z-index: 2; font-size: 18px; color: var(--color-title); border: none; }
.carousel-btn:hover { background: white; box-shadow: var(--shadow-lg); }
.carousel-btn-prev { left: var(--space-3); }
.carousel-btn-next { right: var(--space-3); }
.carousel-dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); }
.carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all var(--transition-fast); border: none; }
.carousel-dot.active { background: white; width: 24px; border-radius: 4px; }
.carousel-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.carousel-thumb { width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-fast); flex-shrink: 0; }
.carousel-thumb.active { border-color: var(--color-primary); }
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; }