:root{
    --polo-red:#E53935;
    --polo-red-d:#c62828;
    --polo-orange:#F57C00;
    --polo-orange-d:#e65100;
    --polo-dark:#0a2540;
    --ink:#1f2937;
}

*{box-sizing:border-box;}

body {
    font-family:'Poppins','Arial',sans-serif;
    /* Background mantido */
    background:url('https://img.freepik.com/fotos-gratis/borrao-abstrato-no-supermercado_1339-4320.jpg') no-repeat center center fixed;
    background-size:cover;
    color:#fff;
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:32px 16px 48px;
    overflow-x:hidden;
}

/* Camada escura sobre o background para dar contraste ao card */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background:linear-gradient(180deg,rgba(10,37,64,.45),rgba(10,37,64,.75));
    z-index:0;
}

.card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:430px;
    background:rgba(255,255,255,.14);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:26px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    padding:30px 24px 24px;
    animation:rise .6s cubic-bezier(.2,.8,.2,1) both;
}

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

/* Cabeçalho / logo */
.profile{text-align:center;}

.logo-badge{
    width:132px;
    height:132px;
    margin:0 auto 16px;
    border-radius:50%;
    background:#fff;
    padding:12px;
    box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.55);
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo-badge img{width:100%;height:100%;object-fit:contain;}

.profile h1{
    margin:6px 0 4px;
    font-size:26px;
    font-weight:800;
    letter-spacing:.5px;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.profile h1 .red{color:#ff6a5f;}
.profile h1 .orange{color:#ffb74d;}

.tagline{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#fff;
    background:linear-gradient(135deg,var(--polo-red),var(--polo-orange));
    padding:4px 12px;
    border-radius:20px;
    margin-bottom:12px;
}

.profile p{
    font-size:14.5px;
    line-height:1.5;
    margin:0 auto 4px;
    max-width:320px;
    color:rgba(255,255,255,.92);
}

/* Lista de links */
.links{margin-top:22px;display:flex;flex-direction:column;gap:12px;}

.link{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.96);
    color:var(--ink);
    text-decoration:none;
    font-weight:600;
    border:1px solid rgba(255,255,255,.7);
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.link:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(0,0,0,.28);
    background:#fff;
}
.link:active{transform:translateY(-1px);}

.link .ic{
    width:44px;height:44px;flex-shrink:0;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#25D366,#128C7E);
    color:#fff;font-size:20px;
    box-shadow:0 4px 10px rgba(18,140,126,.4);
}

.link .txt{display:flex;flex-direction:column;line-height:1.2;text-align:left;flex:1;min-width:0;}
.link .txt .city{font-size:15px;font-weight:700;color:var(--polo-dark);}
.link .txt small{font-size:11.5px;font-weight:500;color:#6b7280;}

.link .arrow{
    flex-shrink:0;color:var(--polo-orange);font-size:18px;
    transition:transform .18s ease;
}
.link:hover .arrow{transform:translateX(4px);}

/* Rodapé */
.footer{
    margin-top:22px;
    text-align:center;
    font-size:12px;
    color:rgba(255,255,255,.8);
}
.footer .bar{
    height:4px;width:60px;margin:0 auto 12px;border-radius:4px;
    background:linear-gradient(90deg,var(--polo-red),var(--polo-orange));
}

@media(max-width:420px){
    .card{padding:24px 18px 20px;}
    .logo-badge{width:112px;height:112px;}
    .profile h1{font-size:23px;}
}