/* === ESTILO BASE === */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
body { background:#f9f9f9; color:#1e1e1e; transition:background .3s,color .3s; }
header { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:10; transition:background .3s; }
header .container { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:auto; padding:10px 20px; }
.logo { height:50px; transition:filter .3s; }
nav a { margin-left:20px; text-decoration:none; color:#1e1e1e; font-weight:500; transition:color .3s; }
nav a:hover, nav a.active { color:#F8C32B; }
.btn-yellow { background:#F8C32B; color:#1e1e1e; padding:8px 16px; border-radius:6px; font-weight:600; text-decoration:none; transition:.3s; }
.btn-yellow:hover { opacity:.9; }
#theme-toggle { background:none; border:none; font-size:1.2rem; cursor:pointer; margin-left:20px; transition:transform .2s; }
#theme-toggle:hover { transform:scale(1.2); }

/* === CONTEÚDO === */
.hero { text-align:center; padding:120px 20px; background:url('../images/hero-bg.svg') no-repeat center/cover; }
.features { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; padding:60px 20px; background:#fff; }
.feature { max-width:300px; text-align:center; }
footer { text-align:center; padding:20px; background:#1e1e1e; color:#fff; margin-top:40px; }
.page-header { text-align:center; padding:80px 20px 40px; }
.cards { display:flex; justify-content:center; gap:30px; flex-wrap:wrap; padding:40px 20px; }
.card { background:#fff; border-radius:10px; padding:20px; max-width:320px; box-shadow:0 3px 6px rgba(0,0,0,.05); text-align:center; transition:transform .2s,background .3s; }
.card:hover { transform:translateY(-5px); }
form { background:#fff; padding:30px; border-radius:10px; max-width:500px; box-shadow:0 2px 6px rgba(0,0,0,.05); margin:auto; }
form input, form textarea { width:100%; margin-bottom:15px; padding:12px; border:1px solid #ddd; border-radius:5px; background:#fff; color:#1e1e1e; }

/* === DARK MODE MANUAL (.dark-mode) === */
.dark-mode body { background:#121212; color:#f5f5f5; }
.dark-mode header { background:#1e1e1e; border-bottom:1px solid #333; }
.dark-mode nav a { color:#f5f5f5; }
.dark-mode .features, .dark-mode .card, .dark-mode form { background:#1e1e1e; }
.dark-mode form input, .dark-mode form textarea { background:#2a2a2a; border-color:#444; color:#f5f5f5; }
.dark-mode footer { background:#000; color:#f5f5f5; }
.dark-mode .btn-yellow { background:#F8C32B; color:#1e1e1e; }

/* ícones e logo automáticos */
.dark-mode img[src*="nfse.svg"] { content:url('../images/dark/nfse-dark.svg'); }
.dark-mode img[src*="erp.svg"] { content:url('../images/dark/erp-dark.svg'); }
.dark-mode img[src*="connect.svg"] { content:url('../images/dark/connect-dark.svg'); }
.dark-mode .logo { content:url('../logo-dark.svg'); }