.lofi-footer {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    padding: 6rem 2rem 3rem;
    text-align: center;
    position: relative;
    margin-top: 6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

/* Wavy Border Effect */
.lofi-footer::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 50px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    transform: rotate(180deg);
    /* Flip to make it look like top border */
}

.footer-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: var(--fs-h3);
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.footer-content p {
    font-size: var(--fs-small);
    color: #666;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
    font-weight: 300;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.social-links a {
    text-decoration: none;
    color: #5d6d7e;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #2c3e50;
}