/* =================================================================atea
   FOCAL DREAM - CUSTOM STYLESHEET
   Brand Colors: 
   - #000000 (Pure Black)
   - #DA9100 (Warm Amber Gold)
   - #F96C1B (Vibrant Orange)
   =================================================================== */

/* Custom CSS Variables */
:root {
    --brand-black: #000000;
    --brand-gold: #DA9100;
    --brand-orange: #F96C1B;
    --dark-card: #111111;
    --dark-border: #222222;
}

/* Base Body Styles */
body {
    background-color: var(--brand-black);
    color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--brand-black);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-gold);
}

/* Selection Highlight */
::selection {
    background-color: var(--brand-orange);
    color: #ffffff;
}

/* Preloader Smooth Fade */
#preloader {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Glow Effects */
.glow-gold {
    box-shadow: 0 0 25px rgba(218, 145, 0, 0.15);
}

.glow-orange {
    box-shadow: 0 0 25px rgba(249, 108, 27, 0.15);
}

/* Card Hover Enhancements */
.service-card, .pricing-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Glassmorphism Navigation Background */
header.sticky {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Utility Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

.animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
}

.hero-bg {
    background-image: url('../assets/images/focalImage.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}