:root {
    --color-primary-light: #fff1f2;
    --color-primary-main: #e11d48;
    --color-secondary-main: #be123c;
    --color-neutral-silver: #f8fafc
}

.text-gradient-tech {
    background: linear-gradient(135deg, #e11d48 0, #be123c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.border-tech-glow {
    border-color: #fda4af;
    box-shadow: 0 4px 20px rgba(225, 29, 72, .15)
}

.bg-architect-grid {
    background-color: #fff;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 24px 24px
}

.service-card {
    background: #fff;
    transition: all .3s ease;
    border: 1px solid #f1f5f9
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(225, 29, 72, .1);
    border-color: #fb7185
}

@media (min-width:1024px) {
    @keyframes float-hover {

        0%,
        100% {
            transform: translateY(0) rotate(0)
        }

        50% {
            transform: translateY(-10px) rotate(1deg)
        }
    }

    .animate-float-hover {
        animation: float-hover 5s ease-in-out infinite
    }

    @keyframes pulse-ring {
        0% {
            transform: scale(.95);
            box-shadow: 0 0 0 0 rgba(225, 29, 72, .7)
        }

        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(225, 29, 72, 0)
        }

        100% {
            transform: scale(.95);
            box-shadow: 0 0 0 0 rgba(225, 29, 72, 0)
        }
    }

    .animate-pulse-ring {
        animation: pulse-ring 2s infinite
    }
}

.text-rose-primary {
    color: #e11d48
}

.bg-rose-light {
    background-color: #fff1f2
}

.border-rose-glow {
    border-color: #fda4af;
    box-shadow: 0 4px 20px rgba(225, 29, 72, .15)
}

.bg-architect-grid-soft {
    background-color: #fff;
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 30px 30px
}

@keyframes scanline {
    0% {
        transform: translateY(-100%)
    }

    100% {
        transform: translateY(100%)
    }
}

.animate-scanline {
    animation: scanline 3s linear infinite
}