/* ==========================================================================
   SVART SECURITY — Global Design System
   Premium High-End Security Aesthetic
   ========================================================================== */

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

:root {
    --color-primary: #01dcfa;
    --color-primary-variant: #00eaff;
    --color-surface: #0a0a0a;
    --color-on-surface: #f8fafc;
    --color-on-surface-variant: #bac9cd;
    --color-accent: #00363f;
}

/* Base Styles */
body {
    color: var(--color-on-surface);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Material Symbols Customization */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}

/* Custom Image Filters */
img {
    filter: contrast(0.95) brightness(0.9) saturate(0.9);
    transition: filter 0.5s ease;
}

/* Glass Card Architecture */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(1, 220, 250, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

@media (hover: hover) {
    .glass-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8);
        border-color: rgba(1, 220, 250, 0.3);
        background: rgba(255, 255, 255, 0.06);
    }
}

/* Premium Gradients & Effects */
.text-primary-gradient {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-variant));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-primary-gradient {
    background: linear-gradient(to right, var(--color-primary), var(--color-primary-variant));
}

.cinematic-glow {
    background: radial-gradient(circle at center, rgba(1, 220, 250, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
}

/* Section Variations */
.bg-section-alt {
    background: transparent;
}

.bg-section-deep {
    background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #080808;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-variant);
}

/* Map Animations */
@keyframes nw-pin-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes nw-scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Custom Button Icon Animations */
.btn-icon-slide {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    a:hover .btn-icon-slide,
    button:hover .btn-icon-slide {
        transform: translateX(0.5rem);
    }
}

.btn-icon-spin {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
    a:hover .btn-icon-spin,
    button:hover .btn-icon-spin {
        transform: rotate(45deg);
    }
}

/* Wiggle Animation for Phone Icons etc. */
@keyframes icon-wiggle {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    75% {
        transform: translateX(3px);
    }
}

.btn-icon-wiggle {
    transition: transform 0.3s ease;
}

@media (hover: hover) {
    a:hover .btn-icon-wiggle,
    button:hover .btn-icon-wiggle {
        animation: icon-wiggle 0.5s ease-in-out infinite;
    }
}

/* Line Grow Animation for Process Steps */
@keyframes line-grow {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.line-grow-animate {
    transform-origin: left;
    transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.5s ease;
}

.is-visible .line-grow-animate {
    animation: line-grow 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}