*{box-sizing:border-box;margin:0;padding:0}
html{background:#050505}
body{
    min-height:100vh;
    background:#050505;
    color:#fff;
    font-family:'Poppins',Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* palco: bloco central com o brilho e as duas linhas douradas na diagonal */
.palco{
    position:relative;
    max-width:880px;
    margin:0 auto;
    padding:56px 24px 40px;
    overflow:hidden;
    background:
        radial-gradient(60% 38% at 50% 58%, rgba(243,198,79,.07), transparent 70%),
        radial-gradient(50% 20% at 50% 12%, rgba(243,198,79,.05), transparent 70%);
}
.palco::before,
.palco::after{
    content:"";
    position:absolute;
    width:1px;
    height:130px;
    background:linear-gradient(to bottom, transparent, var(--ouro), transparent);
    transform:rotate(38deg);
    opacity:.8;
    pointer-events:none;
}
.palco::before{top:10px;left:56px}
.palco::after{bottom:0;right:56px}

/* topo */
.topo{text-align:center}
.logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    margin-bottom:18px;
}
.logo::before,
.logo::after{
    content:"";
    width:90px;
    height:1px;
    background:linear-gradient(to right, transparent, var(--ouro));
}
.logo::after{transform:scaleX(-1)}
.logo span{
    font-size:40px;
    font-weight:800;
    line-height:1;
    color:var(--ouro);
    letter-spacing:.5px;
}
.logo img{max-height:52px;width:auto}
.topo h1{
    font-size:38px;
    font-weight:500;
    line-height:1.15;
    letter-spacing:-.5px;
}
.topo h1 em{
    font-style:normal;
    font-weight:800;
    color:var(--ouro);
}
.sub{
    margin-top:10px;
    font-size:15px;
    color:#e9e9e9;
}
.sub strong,
.garantias strong{color:var(--ouro);font-weight:800}

/* cards */
.cards{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
    margin-top:36px;
}
.card{
    width:var(--largura, 340px);
    max-width:100%;
}
.card a{
    display:block;
    border-radius:18px;
    transition:transform .2s ease, filter .2s ease;
}
.card a:hover,
.card a:focus-visible{
    transform:translateY(-4px) scale(1.015);
    filter:drop-shadow(0 10px 28px rgba(243,198,79,.25));
}
.card a:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}

/* rodapé */
.rodape{
    margin-top:48px;
    padding-top:28px;
    text-align:center;
    position:relative;
}
.rodape::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:min(520px, 90%);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(to right, transparent, rgba(243,198,79,.55), transparent);
}
.seguro{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--ouro);
}
.seguro svg{width:18px;height:18px;fill:currentColor}
.selos{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:16px;
}
.selos img{height:32px;width:auto;border-radius:6px}
.garantias{
    margin-top:16px;
    font-size:12.5px;
    color:#bdbdbd;
}
.legal{
    margin-top:14px;
    font-size:11.5px;
    line-height:1.6;
    color:#7c7c7c;
}
.links{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:10px;
    font-size:11.5px;
}
.links a{color:#9a9a9a;text-decoration:none}
.links a:hover{color:var(--ouro)}

@media (max-width:720px){
    .palco{padding:40px 16px 32px}
    .palco::before{left:20px;height:90px}
    .palco::after{right:20px;height:90px}
    .logo span{font-size:34px}
    .logo::before,.logo::after{width:56px}
    .topo h1{font-size:28px}
    .sub{font-size:13.5px}
    .cards{flex-direction:column;gap:22px;margin-top:28px}
    .card{width:min(var(--largura, 340px), 100%)}
}