:root {
    --dark-blue: #0a0b2e;
    --purple: #6a11cb;
    --accent: #2575fc;
}

body { font-family: 'Inter', sans-serif; overflow-x: hidden; }

.bg-dark-blue { background-color: var(--dark-blue); }

.text-gradient {
    background: linear-gradient(to right, var(--purple), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gradient {
    background: linear-gradient(45deg, var(--purple), var(--accent));
    color: white;
    border: none;
    transition: transform 0.3s ease;
}

.btn-gradient:hover { transform: translateY(-3px); color: #fff; }

.hero-section {
    background: linear-gradient(rgba(10, 11, 46, 0.9), rgba(10, 11, 46, 0.9)), url('../images/hero-bg.jpg');
    height: 80vh;
    background-size: cover;
}

.service-card:hover {
    border-bottom: 4px solid var(--purple) !important;
    transform: scale(1.05);
    transition: 0.3s;
}