:root {
    --quitar-blue: #0066cc; /* Azul da base da logo */
    --quitar-cyan: #0099ff; /* Azul mais claro do meio */
    --quitar-green: #00cc66; /* Verde do check */
    --quitar-light-green: #00ff66;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8fcfd;
}

/* Tipografia e Cores */
.text-primary-custom { color: var(--quitar-blue) !important; }
.text-success-custom { color: var(--quitar-green) !important; }

.text-gradient {
    background: linear-gradient(90deg, var(--quitar-blue) 0%, var(--quitar-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Botões */
.btn-primary-custom {
    background-color: var(--quitar-blue);
    border-color: var(--quitar-blue);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #004d99;
    border-color: #004d99;
    color: white;
}

.btn-success-custom {
    background: linear-gradient(90deg, var(--quitar-green) 0%, #00b359 100%);
    border: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-success-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 204, 102, 0.3) !important;
    color: white;
}

/* Hero Section */
.hero-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #ffffff 0%, #e6f2ff 100%);
}

.hero-img {
    max-width: 80%;
    border-bottom: 5px solid var(--quitar-green);
}

/* Cards */
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.icon-box {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 102, 204, 0.1);
}
.icon-box.text-success-custom {
    background-color: rgba(0, 204, 102, 0.1);
}

/* Footer */
.grayscale-logo {
    filter: grayscale(100%) opacity(60%);
    transition: filter 0.3s ease;
}
.grayscale-logo:hover {
    filter: grayscale(0%) opacity(100%);
}
.step-container {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-control:focus, .form-select:focus {
    border-color: #00cc66;
    box-shadow: 0 0 0 0.25rem rgba(0, 204, 102, 0.15);
}

.btn-primary-custom {
    background-color: #0066cc;
    color: white;
    border: none;
}

.btn-success-custom {
    background-color: #00cc66;
    color: white;
    border: none;
}