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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-security-primary { background-color: #0F172A; } /* Deep Dark Blue */
    .bg-security-secondary { background-color: #3B82F6; } /* High-tech Blue */
    .bg-security-accent { background-color: #EF4444; } /* Alert Red */
    .bg-security-panel { background-color: #1E293B; }
    
    .text-security-primary { color: #F8FAFC; }
    .text-security-secondary { color: #3B82F6; }
    .text-security-accent { color: #EF4444; }
    
    .font-rajdhani { font-family: 'Rajdhani', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

body {
    font-family: 'Inter', sans-serif;
    color: #94A3B8;
    background-color: #020617; /* Extra Dark */
}

h1, h2, h3, h4, h5, h6, .display-font {
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
}

.security-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#3B82F6] text-white font-rajdhani font-bold text-lg tracking-widest rounded-none border border-[#60A5FA] hover:bg-[#2563EB] transition-all duration-300 shadow-[0_0_15px_rgba(59,130,246,0.5)] hover:shadow-[0_0_25px_rgba(59,130,246,0.8)];
}

.security-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border border-[#EF4444] text-[#EF4444] font-rajdhani font-bold text-lg tracking-widest rounded-none hover:bg-[#EF4444] hover:text-white transition-all duration-300 shadow-[0_0_15px_rgba(239,68,68,0.2)] hover:shadow-[0_0_25px_rgba(239,68,68,0.6)];
}

/* Grid Background */
.cctv-pattern {
    background-color: #020617;
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Scanner Animation */
.scanner-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: #3B82F6;
    box-shadow: 0 0 10px #3B82F6, 0 0 20px #3B82F6;
    opacity: 0.5;
    animation: scan 4s linear infinite;
    z-index: 10;
}

@keyframes scan {
    0% { top: 0; }
    50% { top: 100%; }
    100% { top: 0; }
}

/* REC Animation */
.rec-dot {
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Target Crosshair */
.crosshair {
    position: relative;
}
.crosshair::before, .crosshair::after {
    content: '';
    position: absolute;
    background: #EF4444;
}
.crosshair::before {
    top: 50%; left: -10px; right: -10px; height: 1px;
}
.crosshair::after {
    left: 50%; top: -10px; bottom: -10px; width: 1px;
}