/* SERENITY SPA & RETREAT — styles.css */
html{scroll-behavior:smooth}*{box-sizing:border-box}
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:#8b7355;z-index:9999;width:0%;transition:width 0.1s linear}
#navbar{background:rgba(45,45,45,0.95);backdrop-filter:blur(12px);transition:all 0.3s ease}
#navbar.scrolled{background:#2d2d2d;box-shadow:0 2px 20px rgba(0,0,0,0.3)}
.btn-primary{background:#8b7355;color:#fff;font-family:'Lato',sans-serif;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.8rem 2rem;border-radius:2px;border:none;cursor:pointer;transition:all 0.2s ease;display:inline-block;text-align:center}
.btn-primary:hover{background:#7a6348;transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,115,85,0.35)}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.5);font-family:'Lato',sans-serif;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:0.8rem 2rem;border-radius:2px;cursor:pointer;transition:all 0.2s ease;display:inline-block;text-align:center}
.btn-outline:hover{border-color:#8b7355;color:#8b7355}
.mobile-menu{max-height:0;overflow:hidden;transition:max-height 0.35s ease}
.mobile-menu.open{max-height:500px}
.reveal-section{opacity:0;transform:translateY(28px);transition:opacity 0.8s ease,transform 0.8s ease}
.reveal-section.revealed{opacity:1;transform:translateY(0)}
.service-card{transition:all 0.3s ease;border:1px solid #e8e0d5}
.service-card:hover{border-color:#8b7355;transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.08)}
.counter{font-variant-numeric:tabular-nums}
.carousel-slide{display:none}.carousel-slide.active{display:block;animation:fadeSlide 0.5s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#d4c9ba;cursor:pointer;border:none;padding:0;transition:all 0.3s}
.carousel-dot.active{background:#8b7355;width:24px;border-radius:4px}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.4s ease}
.faq-item.open .faq-answer{max-height:300px}
.faq-icon{transition:transform 0.3s ease}
.faq-item.open .faq-icon{transform:rotate(180deg)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box{background:#fdf9f5;border-radius:4px;padding:2rem;max-width:520px;width:calc(100% - 2rem);max-height:90vh;overflow-y:auto;transform:scale(0.95);transition:transform 0.3s ease;box-shadow:0 25px 60px rgba(0,0,0,0.3)}
.modal-overlay.active .modal-box{transform:scale(1)}
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:3rem;height:3rem;background:#8b7355;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:50}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{background:#7a6348;transform:translateY(-3px)}
@keyframes heroUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.hero-text-1{animation:heroUp 0.8s ease forwards 0.2s;opacity:0}
.hero-text-2{animation:heroUp 0.8s ease forwards 0.4s;opacity:0}
.hero-text-3{animation:heroUp 0.8s ease forwards 0.6s;opacity:0}
.hero-text-4{animation:heroUp 0.8s ease forwards 0.8s;opacity:0}
.lazy-img{filter:blur(6px);transition:filter 0.6s ease}.lazy-img.loaded{filter:blur(0)}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#fdf9f5}::-webkit-scrollbar-thumb{background:#8b7355;border-radius:4px}