/* ═══════════════════════════════════════════════════════
   ShieldScan — Custom Styles
   ═══════════════════════════════════════════════════════ */

:root {
    --navy: #0a0f1e;
    --navy-light: #0f172a;
    --navy-lighter: #1e293b;
    --accent: #00d4ff;
    --accent-dark: #00a3cc;
    --risk-green: #22c55e;
    --risk-yellow: #eab308;
    --risk-orange: #f97316;
    --risk-red: #ef4444;
}

/* ── Smooth scroll ─────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

/* ── Custom scrollbar ──────────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--navy);
}
::-webkit-scrollbar-thumb {
    background: var(--navy-lighter);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ── Text gradient ─────────────────────────────────── */
.text-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Navigation ────────────────────────────────────── */
.nav-link {
    @apply text-sm text-gray-400 hover:text-white transition-colors duration-200;
}

.mobile-nav-link {
    @apply block px-4 py-3 text-gray-300 hover:text-white hover:bg-white/5 rounded-lg transition-colors;
}

.nav-scrolled {
    @apply bg-navy/80 backdrop-blur-xl border-b border-white/5 shadow-lg;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-primary {
    @apply inline-flex items-center justify-center rounded-xl font-semibold text-white
           bg-gradient-to-r from-accent to-blue-500 
           hover:from-accent-dark hover:to-blue-600
           shadow-lg shadow-accent/20 hover:shadow-accent/30
           transition-all duration-300 ease-out;
}

.btn-secondary {
    @apply inline-flex items-center justify-center rounded-xl font-semibold
           text-gray-300 hover:text-white
           border border-white/10 hover:border-white/20
           bg-white/5 hover:bg-white/10
           transition-all duration-300 ease-out;
}

/* ── Glass card ────────────────────────────────────── */
.card-glass {
    @apply bg-navy-light/50 backdrop-blur-sm border border-white/5 rounded-2xl p-6 lg:p-8
           hover:border-white/10 transition-all duration-300;
}

/* ── Trust badge ───────────────────────────────────── */
.trust-badge {
    @apply flex flex-col items-center gap-2 bg-navy-light/50 border border-white/5 rounded-xl px-6 py-5
           hover:border-accent/20 transition-colors duration-300;
}

/* ── Scroll reveal animations ──────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-100 { transition-delay: 0.1s; }
.reveal-delay-200 { transition-delay: 0.2s; }
.reveal-delay-300 { transition-delay: 0.3s; }

/* ── Scan bar animation ────────────────────────────── */
@keyframes scanBar {
    0% { width: 0%; }
    100% { width: 38%; }
}
.animate-scan-bar {
    animation: scanBar 2s ease-out forwards;
}

/* ── Scan spinner ──────────────────────────────────── */
.scan-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Scan step indicator ───────────────────────────── */
.scan-step {
    transition: color 0.3s ease;
}
.scan-step.active {
    color: var(--accent);
}
.scan-step.done {
    color: var(--risk-green);
}

/* ── Counter animation ─────────────────────────────── */
@keyframes countUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
.count-enter {
    animation: countUp 0.4s ease-out;
}

/* ── Glow effect on hover ──────────────────────────── */
.card-glass:hover {
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.03);
}

/* ── Responsive adjustments ────────────────────────── */
@media (max-width: 640px) {
    .trust-badge {
        @apply px-4 py-3;
    }
    .trust-badge span:first-child {
        font-size: 1.5rem;
    }
}