:root {
    --bg: #f8faff;
    --text: #ffffff; /* Texto principal branco para alto contraste */
    --text-sub: #e2e8f0; /* Texto secundário levemente acinzentado */
    --accent: #ffffff; /* Ajustado para destaque no fundo da imagem */
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

body { 
    font-family: 'Inter', sans-serif; 
    color: var(--text); 
    margin: 0; 
    position: relative;
    min-height: 100vh;
}

/* Background image ajustada para cobrir a tela */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('/static/img/dns.png');
    background-size: cover; /* Preenche a tela toda */
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000000;
    z-index: -1;
}

.hero { padding: 80px 20px; text-align: center; position: relative; z-index: 1; }
h1 { font-size: 3rem; font-weight: 800; margin-bottom: 15px; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.sub { font-size: 1.1rem; color: var(--text-sub); max-width: 550px; margin: 0 auto 40px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.dns-config-section { padding: 40px 20px; position: relative; z-index: 1; }
.config-card { 
    background: rgba(0, 0, 0, 0.5); /* Fundo escuro semitransparente */
    padding: 40px; 
    border-radius: 24px; 
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 600px; 
    margin: 0 auto; 
    color: white;
}

.ip-group { display: flex; justify-content: center; gap: 40px; margin: 20px 0; text-align: center; }
.ip-item { font-size: 2.5rem; font-weight: 800; color: #ffffff; display: block; }
.ip-label { font-size: 0.8rem; font-weight: 600; color: #cbd5e1; text-transform: uppercase; letter-spacing: 1.5px; display: block; }

.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 40px 20px; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.feature-item { 
    background: rgba(0, 0, 0, 0.5); 
    padding: 25px; 
    border-radius: 16px; 
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}
.feature-item i { font-size: 2rem; color: #ffffff; margin-bottom: 15px; display: block; }
.feature-item h3 { margin: 0 0 10px 0; color: #ffffff; }
.feature-item p { color: #e2e8f0; }

footer { text-align: center; padding: 40px; color: #cbd5e1; font-size: 0.9rem; position: relative; z-index: 1; }