:root {
    --navy-900: #051721;
    --navy-800: #0A2332;
    --navy-700: #122F42;
    --navy-600: #1E4258;
    --orange-500: #F29B32;
    --orange-400: #F7B366;
    --orange-600: #D17E1A;
    --white: #FFFFFF;
    --whatsapp: #25D366;

    --bg-base:     var(--navy-900);
    --bg-elevated: var(--navy-800);
    --bg-raised:   var(--navy-700);

    --text-primary:   var(--white);
    --text-secondary: rgba(255,255,255,0.72);
    --text-tertiary:  rgba(255,255,255,0.48);
    --text-accent:    var(--orange-500);
    --text-on-accent: var(--navy-900);

    --accent:             var(--orange-500);
    --accent-hover:       var(--orange-600);
    --accent-soft:        rgba(242,155,50,0.12);
    --accent-soft-border: rgba(242,155,50,0.30);

    --border-subtle:  rgba(255,255,255,0.08);
    --border-default: rgba(255,255,255,0.20);
    --border-strong:  rgba(255,255,255,0.30);

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 0 3px rgba(242,155,50,0.15);

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;
}

@layer base {
    html { scroll-behavior: smooth; }

    body {
        background-color: var(--bg-base);
        color: var(--text-primary);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4 {
        font-weight: 500;
        color: var(--text-primary);
        letter-spacing: -0.015em;
        line-height: 1.2;
        margin: 0;
    }

    p, li {
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
    }

    a {
        color: var(--text-accent);
        text-decoration: none;
        transition: color var(--duration-fast) var(--ease-out);
    }
}

.section-label {
    font-size: 12px;
    letter-spacing: 0.18em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-accent);
}

/* Fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}
.fade-in.delay-100 { transition-delay: 100ms; }
.fade-in.delay-200 { transition-delay: 200ms; }
.fade-in.delay-300 { transition-delay: 300ms; }
.fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* Ticker */
@keyframes scrollTicker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1.5rem)); }
}
.ticker-container {
    overflow: hidden;
    direction: ltr;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.ticker-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: scrollTicker 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

/* Sticky Navbar */
#navbar {
    transition: background-color var(--duration-base) var(--ease-out),
                border-color     var(--duration-base) var(--ease-out),
                backdrop-filter  var(--duration-base) var(--ease-out);
}
#navbar.scrolled {
    background-color: rgba(5,23,33,0.90);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Catalog Dropdown */
#catalog-submenu {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 160px;
    z-index: 60;
}
#catalog-submenu[role="menu"] a {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all var(--duration-fast) var(--ease-out);
}
#catalog-submenu[role="menu"] a:hover {
    color: var(--text-primary);
    background: var(--bg-raised);
}

/* WhatsApp Pulse */
@keyframes waPulse {
    0%   { box-shadow: 0 0 0 0    rgba(37,211,102,0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0    rgba(37,211,102,0); }
}
#wa-float { animation: waPulse 2.2s infinite; }

/* Focus */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Selection */
::selection { background: rgba(242,155,50,0.20); }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .fade-in { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
    #wa-float { animation: none; }
    .ticker-track { animation: none; }
}

/* Scrollbar Utilities */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* About Page Utilities */
.value-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card { transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.why-card:hover { background: var(--bg-raised) !important; border-color: var(--accent-soft-border) !important; }

/* Collection Page Utilities */
.product-card .card-overlay {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.product-card:hover .card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.filter-btn.active {
    background-color: var(--accent);
    color: var(--navy-900);
    border-color: var(--accent);
}
.filter-btn {
    transition: all var(--duration-fast) var(--ease-out);
}
.product-card.hidden-card {
    display: none;
}
#empty-state { display: none; }
#empty-state.visible { display: flex; }

/* Contact Page Utilities */
.location-card { transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base); }
.location-card:hover { transform: translateY(-4px); }

/* Services Page Utilities */
.service-card { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Projects Page Utilities */
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: 1.5rem;
}
.mosaic-item { position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border-subtle); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.mosaic-item:hover img { transform: scale(1.1); }
#lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(5, 23, 33, 0.98); backdrop-filter: blur(15px); }
#lightbox.active { display: flex; align-items: center; justify-content: center; }