/* Variables */
:root {
    --primary-dark: #111111;
    --secondary-dark: #181818;
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --accent: #9a9a9a;
    
    --text-white: #ffffff;
    --text-grey: #a0a0a0;
    --text-dark: #1a1a1a;
    --text-dark-muted: #555555;
    
    --transition-slow: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    --transition-fast: all 0.3s ease;
}

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, .navbar-brand {
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.03em;
}

/* Utilities */
.bg-dark-premium { background-color: var(--primary-dark); color: var(--text-white); }
.bg-dark-secondary { background-color: var(--secondary-dark); color: var(--text-white); }
.bg-white { background-color: var(--bg-white); color: var(--text-dark); }
.bg-light { background-color: var(--bg-light); color: var(--text-dark); }

.text-accent { color: var(--accent); }
.text-dark-muted { color: var(--text-dark-muted); }
.section-padding { padding: 160px 0; }
.tracking-wide { letter-spacing: 0.1em; }
.tracking-widest { letter-spacing: 0.25em; }
.transition { transition: var(--transition-fast); }
.hover-opacity-100:hover { opacity: 1 !important; }

/* Loader */
#loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--primary-dark);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}
.loader-content { text-align: center; }
.logo-text { font-family: 'Manrope'; letter-spacing: 0.5em; font-weight: 200; font-size: 1.5rem; color: white;}
.loader-bar { width: 0; height: 1px; background: white; margin-top: 20px; transition: width 1s ease; }

/* Navbar */
#mainNav { padding: 30px 0; transition: var(--transition-slow); }
#mainNav.scrolled {
    background: rgba(17, 17, 17, 0.95);
    padding: 15px 0;
    backdrop-filter: blur(10px);
}
.nav-link {
    color: var(--text-grey) !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 15px;
    transition: var(--transition-fast);
}
.nav-link:hover { color: var(--text-white) !important; }

/* Hero */
.hero-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0; filter: brightness(0.6);
    transform: scale(1.05); transition: transform 10s ease;
}
#hero:hover .hero-img { transform: scale(1); }
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(0deg, var(--primary-dark) 0%, transparent 100%);
    z-index: 1;
}

/* Image Hover Zoom */
.hover-zoom { transition: var(--transition-slow); }
.editorial-img-container:hover .hover-zoom { transform: scale(1.05); }

/* Portfolio Filters */
.portfolio-filters {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}
.filter-btn {
    background: transparent; border: none; color: var(--text-grey);
    text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.8rem;
    font-weight: 500; padding: 0 0 8px 0; margin-bottom: -6px;
    position: relative; cursor: pointer; transition: var(--transition-fast);
}
.filter-btn::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px;
    background-color: var(--text-white); transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.filter-btn:hover, .filter-btn.active { color: var(--text-white); }
.filter-btn:hover::after, .filter-btn.active::after { width: 100%; }

/* Portfolio Cards */
.project-card { position: relative; overflow: hidden; cursor: pointer; }
.project-card img {
    transition: var(--transition-slow); filter: grayscale(80%);
    aspect-ratio: 4/5; object-fit: cover;
}
.project-card:hover img { transform: scale(1.05); filter: grayscale(0%); }
.project-info {
    position: absolute; bottom: -50px; left: 30px;
    opacity: 0; transition: var(--transition-slow);
}
.project-card:hover .project-info { bottom: 30px; opacity: 1; }

/* Swiper Carousel Customization */
.swiper-button-next, .swiper-button-prev {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: var(--transition-fast);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #ffffff !important;
    transform: scale(1.1);
}
.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.4;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}

/* Services */
.theme-light .service-box {
    transition: background 0.4s ease;
    border-color: #e5e5e5 !important;
}
.theme-light .service-box:hover {
    background: var(--bg-white);
}
.theme-light .service-number {
    font-size: 4rem; font-weight: 800;
    color: rgba(0,0,0,0.04);
    display: block; margin-bottom: -20px;
}

/* Forms */
.custom-input {
    background: transparent; border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-radius: 0; color: white;
    padding: 15px 0; margin-bottom: 10px;
}
.custom-input:focus {
    background: transparent; box-shadow: none;
    border-color: white; color: white;
}
.btn-white-premium {
    background: white; color: var(--primary-dark);
    border: none; border-radius: 0;
    letter-spacing: 0.2em; font-weight: bold;
    font-size: 0.85rem; transition: var(--transition-fast);
}
.btn-white-premium:hover { background: var(--text-grey); color: white; }

/* Responsive */
@media (max-width: 991px) {
    .section-padding { padding: 100px 0; }
    .display-1 { font-size: 3rem; }
}