/* =========================================================================
   MASTERTEC BRASIL - ASSISTÊNCIA TÉCNICA SC & PR
   Global Custom Styles & Industrial High-Conversion Aesthetics
   ========================================================================= */

:root {
    --color-background: #02101F;
    --color-surface: #02101F;
    --color-surface-bright: #112235;
    --color-surface-container: #0D1C2E;
    --color-surface-container-high: #0F172A;
    --color-secondary: #F97316;
    --color-secondary-hover: #EA580C;
    --color-tertiary-fixed: #6BFF8F;
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}

body {
    background-color: var(--color-background);
    color: #ffffff;
    font-family: var(--font-body);
}

/* =========================================================================
   GLASSMORPHISM & SURFACES
   ========================================================================= */
.glass-overlay {
    background: rgba(2, 16, 31, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.surface-card {
    background: #0D1C2E;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.surface-card:hover {
    border-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.15);
}

/* =========================================================================
   BUTTON PRESS EFFECT
   ========================================================================= */
.btn-press:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-in-out;
}

/* =========================================================================
   HEADER DYNAMICS ON SCROLL
   ========================================================================= */
.header-scrolled {
    box-shadow: 0 4px 25px -2px rgba(0, 0, 0, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(2, 16, 31, 0.94) !important;
}

/* =========================================================================
   INFINITE MARQUEE ANIMATION
   ========================================================================= */
.mask-image-gradient {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.animate-infinite-scroll {
    display: flex;
    width: max-content;
    animation: infinite-scroll 28s linear infinite;
}

.animate-infinite-scroll:hover {
    animation-play-state: paused;
}

@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================================================================
   CTA GLOW BACKGROUND
   ========================================================================= */
.cta-glow {
    background: radial-gradient(circle at center, rgba(249, 115, 22, 0.12) 0%, rgba(2, 16, 31, 0) 70%), #02101F;
}

/* =========================================================================
   BRAND LOGO CONTAINER STYLING
   ========================================================================= */
.brand-logo-img {
    max-height: 40px;
    width: auto;
    object-fit: contain;
    display: block;
}

.brand-logo-footer-img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* =========================================================================
   CUSTOM SCROLLBAR
   ========================================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #02101F;
}

::-webkit-scrollbar-thumb {
    background: #112235;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F97316;
}