/* =========================================================
   PrimeNet — TEMA CLARO (Branco + Roxo oficial PrimeNet)
   ========================================================= */

/* ---------- Paleta / Tokens ---------- */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#f7f8fc;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(16,24,40,.06);

  --text:#0b0f19;
  --muted:#4b5563;

  /* Roxos PrimeNet — EXATAMENTE IGUAL à seção de FEATURES */
  --accent:#4B0053;     /* roxo oficial */
  --accent-2:#2B0031;   /* roxo profundo */

  --ring: rgba(75, 0, 83, .32);
  --radius: 16px;
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px,92%);margin:0 auto}
.row{display:flex;flex-wrap:wrap;gap:24px}

/* Linha de cards (Assine agora) */
.row--cards{
  align-items:stretch;
}

/* Os cards dentro dessa linha ocupam metade cada em desktop */
.row--cards .card{
  flex:1 1 360px;
}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.1rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* BOTÃO PRINCIPAL (agora roxo profundo oficial) */
.btn-primary,
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:var(--shadow);
}

.btn-primary:hover,
.btn.primary:hover{
  filter:saturate(1.05) brightness(1.02);
}

/* Botão fantasma */
.btn-ghost,
.btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover,
.btn.ghost:hover{
  background:#fff;
  box-shadow:var(--shadow);
}

/* ---------- Formulários / Inputs ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:.75rem .9rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:#ffffff;
  font:inherit;
  color:var(--text);
  outline:none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

input::placeholder,
textarea::placeholder{
  color:#9ca3af;
}

/* Foco bonito em roxo PrimeNet */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
  border-color:var(--accent);
  box-shadow:
    0 0 0 1px rgba(75,0,83,.08),
    0 0 0 4px var(--ring);
  background:#fff;
}

/* Select com aparência mais limpa */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:#ffffff;
}

/* Para a seção Assine Agora, deixa o formulário bem organizado */
#contato .stack{
  gap:12px;
}

/* =========================================================
   UTILITÁRIOS
   ========================================================= */
.center{display:flex;justify-content:center;align-items:center}
.stack{display:flex;flex-direction:column;gap:12px}
.grid-gap-8{display:grid;gap:8px}
.shadow-soft{box-shadow:var(--shadow)}
.round{border-radius:999px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
.mt-64{margin-top:64px}
.p-16{padding:16px}
.p-24{padding:24px}
.p-32{padding:32px}