html { scroll-behavior: smooth; }
body { background-color: #fcfaf8; }

.hero-bg {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%), url('image-top2.jpeg');
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
}

.floating-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 50; overflow: hidden;
}
.floater { position: absolute; bottom: -100px; opacity: 0; animation: float-up infinite linear; }
.floater.heart { color: rgba(200, 107, 83, 0.2); font-size: 1.2rem; }
.floater.dot { background-color: rgba(200, 107, 83, 0.15); border-radius: 50%; }

@keyframes float-up {
    0% { transform: translateY(0) scale(0.8) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-120vh) scale(1.2) rotate(360deg); opacity: 0; }
}

.f1 { left: 10%; animation-duration: 15s; }
.f2 { left: 25%; animation-duration: 22s; }
.f3 { left: 40%; animation-duration: 18s; }
.f4 { left: 55%; animation-duration: 25s; }
.f5 { left: 70%; animation-duration: 19s; }

.input-clean {
    border: none;
    border-bottom: 1px solid #d1d5db;
    background: transparent;
    border-radius: 0;
    padding: 8px 0;
}
.input-clean:focus { outline: none; border-bottom-color: #c86b53; }

#backToTop { opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 120; }
#backToTop.show { opacity: 1; visibility: visible; }