:root {
    color-scheme: only light;
}

.fundo-oceano {
    background:
        radial-gradient(circle at 20% 20%, rgba(2, 132, 199, 0.24), transparent 42%),
        radial-gradient(circle at 80% 0%, rgba(34, 197, 94, 0.18), transparent 33%),
        radial-gradient(circle at 90% 80%, rgba(14, 116, 144, 0.22), transparent 40%),
        linear-gradient(160deg, #f0f9ff 0%, #ecfeff 40%, #f8fafc 100%);
}

.onda {
    position: absolute;
    inset: auto 0 -1px;
    width: 100%;
    height: 84px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 1) 92%);
}

.cartao-revela {
    opacity: 0;
    transform: translateY(22px);
    animation: revelar 0.7s ease forwards;
}

.cartao-revela:nth-child(2) {
    animation-delay: 0.12s;
}

.cartao-revela:nth-child(3) {
    animation-delay: 0.24s;
}

.cartao-revela:nth-child(4) {
    animation-delay: 0.36s;
}

.smart-suggestions {
    background:
        radial-gradient(circle at 10% 15%, rgba(2, 132, 199, 0.11), transparent 35%),
        radial-gradient(circle at 95% 85%, rgba(2, 132, 199, 0.08), transparent 34%),
        #f8fafc;
}

.cartao-sugestao {
    box-shadow: 0 14px 38px -28px rgba(2, 132, 199, 0.48);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.cartao-sugestao:hover {
    transform: translateY(-7px);
    border-color: rgba(2, 132, 199, 0.42);
    box-shadow: 0 22px 45px -26px rgba(2, 132, 199, 0.55);
}

.cartao-sugestao:hover .icone-sugestao {
    transform: scale(1.05);
}

.icone-sugestao {
    transition: transform 0.25s ease;
}

@keyframes revelar {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}