/* style.css - Socialize Me Soft Theme */

:root {
    --color-brand-primary: #7A9E9F; 
    --color-brand-secondary: #E3B5A4; 
    --color-brand-dark: #37474F; 
    --color-brand-surface: #F4F1ED; 
    --color-brand-light: #FCFBF9; 
}

body {
    background-color: var(--color-brand-light);
    color: var(--color-brand-dark);
}

.header-visible { transform: translateY(0); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } 
.header-hidden { transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } 

#mobileMenu { transition: opacity 0.4s ease, visibility 0.4s ease; } 
.mobile-menu-open { opacity: 1 !important; visibility: visible !important; } 

.trust-bar-scroll { animation: scroll 40s linear infinite; } 
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } 

.soft-shadow { box-shadow: 0 15px 40px -10px rgba(55, 71, 79, 0.05); }
.soft-shadow-lg { box-shadow: 0 25px 50px -15px rgba(55, 71, 79, 0.08); }

.gsap-fade-up { opacity: 0; transform: translateY(30px); } 

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 7s ease-in-out infinite; }

.browser-mockup { 
    border-top: 32px solid #EAE6E1; 
    border-radius: 16px; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 20px 40px -15px rgba(55, 71, 79, 0.08); 
    border-left: 1px solid #EAE6E1; 
    border-right: 1px solid #EAE6E1; 
    border-bottom: 1px solid #EAE6E1; 
    background: var(--color-brand-light); 
} 
.browser-mockup::before { 
    content: ''; position: absolute; top: -20px; left: 16px; width: 10px; height: 10px; 
    border-radius: 50%; background: #E3B5A4; box-shadow: 18px 0 0 #D4C4A1, 36px 0 0 #7A9E9F; z-index: 10; 
} 
.scroll-image { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: object-position 5s ease-in-out; } 
.browser-mockup:hover .scroll-image { object-position: bottom; }

.svc-card-active { border-color: var(--color-brand-primary) !important; background-color: #E8EFEF !important; box-shadow: 0 10px 30px -10px rgba(122, 158, 159, 0.15); } 

input[type="range"] { -webkit-appearance: none; height: 6px; background: #EAE6E1; border-radius: 10px; outline: none; } 
input[type="range"]::-webkit-slider-thumb { 
    -webkit-appearance: none; width: 24px; height: 24px; background: var(--color-brand-primary); 
    border-radius: 50%; cursor: pointer; border: 4px solid var(--color-brand-light); 
    box-shadow: 0 2px 10px rgba(122, 158, 159, 0.3); transition: transform 0.2s; 
} 
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }