@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background-color: #f8fafc;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.transition-all {
    transition: all 0.3s ease;
}

.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.url-input:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.notification {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}

.mode-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.floating-label {
    top: -10px;
    left: 10px;
    transition: all 0.2s ease;
}

.icon-circle {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.hero-gradient {
    background: linear-gradient(135deg, #f0f7ff 0%, #e0e7ff 100%);
}

.site-badge {
    transition: all 0.2s ease;
}

.site-badge:hover {
    transform: translateY(-2px);
}
 /* Adicionar ao estilo existente */
.btn-primary {
background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%);
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
transition: all 0.3s ease;
}

.btn-primary:hover {
background: linear-gradient(135deg, #2563eb 0%, #4338ca 100%);
box-shadow: 0 6px 18px rgba(59, 130, 246, 0.4);
transform: translateY(-2px);
}

.mode-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-bottom: 3px solid transparent;
}

.mode-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
border-bottom: 3px solid #3b82f6;
}

.card-shimmer {
position: relative;
overflow: hidden;
}

.card-shimmer::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
);
transform: rotate(30deg);
animation: shimmer 3s infinite;
}

@keyframes shimmer {
from {transform: rotate(30deg) translateX(-100%);}
to {transform: rotate(30deg) translateX(100%);}
}

.floating {
animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}