.hero {
    background: var(--bg-gradient);
    min-height: 85vh;
    display: flex;
    align-items: center;
    color: var(--yogurt-white);
    padding: 4rem 0;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
    align-items: center;
}

.hero-text {
    text-shadow: 0 2px 10px rgba(0,0,0,0.15); /* Adds a tiny "lift" to make text pop */
}

.hero-text h1 { 
    font-size: 4rem; 
    line-height: 1.1; 
    font-weight: 800; 
    margin-bottom: 1.5rem;
    letter-spacing: -2px;
}

.hero-text p { 
    font-size: 1.1rem; 
    margin-bottom: 2.5rem; 
    opacity: 0.85; 
    max-width: 480px; 
}

.hero-btns { display: flex; gap: 1rem; }
.btn-white { background: var(--yogurt-white); color: var(--primary-brand); }
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

.btn-outline { 
    background: transparent; 
    border: 2px solid rgba(255,255,255,0.3); 
    color: white; 
}
.btn-outline:hover { background: white; color: var(--primary-brand); }

/* --- IMAGE BLENDING LOGIC --- */
.hero-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.main-yogurt-img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-lg); 
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.4),
        0 0 0 10px rgba(255,255,255,0.05); 
    transform: rotate(2deg); /* Slight tilt for a modern look */
    transition: var(--transition);
}

.main-yogurt-img:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Add a soft glow behind the image */
.hero-image::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background: var(--accent-blue);
    filter: blur(100px);
    opacity: 0.2;
    z-index: -1;
}

@media (max-width: 992px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-text h1 { font-size: 3rem; }
    .hero-btns { justify-content: center; }
    .hero-image { margin-top: 3rem; }
}