@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    background: #0d0f1a;
    color: white;
    overflow-x: hidden;
}

/* GRADIENTE ANIMADO */
.gradient {
    position: fixed;
    inset: 0;
    background: linear-gradient(120deg, #5b2be9, #00c3ff, #7f00ff);
    background-size: 300% 300%;
    animation: gradientShift 10s ease infinite;
    opacity: 0.35;
    z-index: -3;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* BLOBS */
.blob-container {
    position: fixed;
    bottom: -100px;
    right: -100px;
    width: 600px;
    opacity: 0.3;
    z-index: -2;
}

.blob {
    width: 100%;
}

/* HEADER */
header {
    padding: 25px;
}

.logo {
    font-size: 32px;
    font-weight: 700;
}

.logo span {
    color: #7f5cf8;
}

/* HERO */
.hero {
    padding: 150px 20px 100px;
    text-align: center;
}

.hero h1 {
    font-size: 56px;
    line-height: 1.2;
}

.hero span {
    color: #00c3ff;
}

.subtitle {
    margin: 20px auto 40px;
    max-width: 600px;
}

.cta-button {
    background: #7f00ff;
    padding: 16px 36px;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 20px #7f00ff80;
}

/* SECTIONS */
.section {
    padding: 80px 20px;
    text-align: center;
}

.text {
    max-width: 650px;
    margin: 0 auto;
}

/* FEATURES */
.features {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.feature-card {
    background: #ffffff10;
    border: 1px solid #ffffff20;
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

/* FORM */
.form-section {
    padding: 100px 20px;
    text-align: center;
    background: #ffffff05;
    backdrop-filter: blur(8px);
}

.form {
    max-width: 500px;
    margin: 0 auto;
    display: grid;
    gap: 15px;
}

.form input,
.form select {
    padding: 13px;
    border-radius: 10px;
    border: none;
    background: #ffffff15;
    color: white;
}

button {
    padding: 16px;
    background: #00c3ff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

#particles-js {
    position: fixed;
    inset: 0;
    z-index: -5;
}

/* Select dark theme – cross-browser */
.form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color: #fff;
  padding: 13px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  font-size: 1rem;
  /* espaço para a seta */
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' viewBox='0 0 14 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
}

/* Força cor e fundo das options (aplica na maioria dos navegadores) */
.form select option {
  background: #0d0f1a;     /* fundo escuro igual ao site */
  color: #ffffff;          /* texto branco */
}

/* WebKit browsers often ignore option background; this helps when the native picker opens */
select:-webkit-autofill,
.form select:-webkit-autofill,
.form select:-internal-autofill-selected {
  -webkit-text-fill-color: #ffffff !important;
}

/* Em dispositivos iOS/Android, o native picker still may apply defaults.
   Como fallback, escondemos o elemento nativo e usamos um pseudo-elemento visualmente igual (opcional). */
.form select.wrap {
  position: relative;
}
.form select.wrap select {
  width: 100%;
}
/* CONTAINER PRINCIPAL DA SEÇÃO */
.bg-light-gray {
    background-color: #f8f8f8;
    padding: 60px 0;
}

.simulador-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

/* CABEÇALHO */
.simulador-header {
    text-align: center;
    margin-bottom: 30px;
}

.header-title {
    color: #00c3ff; /* Cor primária do seu site */
    font-size: 2.2em;
    margin-bottom: 5px;
    font-weight: 700;
}

.header-subtitle {
    color: #666;
    font-size: 1.1em;
}

/* CARD PRINCIPAL (Formulário e Resultado) */
.simulador-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 30px;
}

/* INPUTS E FORMULÁRIO */
.input-group {
    margin-bottom: 25px;
}

.input-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.input-field {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box; /* Garante que o padding não aumente o tamanho total */
    transition: border-color 0.3s;
}

.input-field:focus {
    border-color: #00c3ff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 195, 255, 0.5);
}

.input-hint {
    display: block;
    margin-top: 5px;
    font-size: 0.85em;
    color: #999;
}

/* BOTÃO DE SIMULAÇÃO */
.btn {
    padding: 14px 25px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 700;
}

.btn-primary {
    background-color: #00c3ff;
    color: white;
}

.btn-primary:hover {
    background-color: #0099cc; /* Um azul um pouco mais escuro */
}

.btn-full-width {
    width: 100%;
    margin-top: 10px;
}

/* SEÇÃO DE RESULTADO (JS deve remover a classe 'hidden' ao exibir) */
.resultado-box {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
    transition: opacity 0.5s;
}

.resultado-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 5px;
}

.resultado-valor {
    color: #4CAF50; /* Cor de sucesso/lucro (Verde) */
    font-size: 2.5em;
    font-weight: 900;
    margin-top: 0;
}

.resultado-disclaimer {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 15px;
}

.hidden {
    display: none;
}

/* Se quiser um controle totalmente custom (sem usar <option> nativo), avise que eu te passo o JS/CSS para um "custom dropdown". */