@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html { scroll-behavior: smooth; }

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0B0F1A; }
::-webkit-scrollbar-thumb { background: #D4AF37; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #AA8C2C; }

.before-after {
    --split: 55%;
}

.before-after__after {
    width: var(--split);
}

.before-after__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #D4AF37;
    border-radius: 999px;
    border: 2px solid rgba(11, 15, 26, 0.6);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
    cursor: pointer;
}

.before-after__range {
    -webkit-appearance: none;
    appearance: none;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    outline: none;
}