@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Inter:wght@400;500;600;700;800&display=swap');

/* Paleta oficial da NetVale (tirada da logo): azul royal + verde, branco.
   --navy / --gold-bright mantêm esses nomes de variável por conveniência
   (usados em vários lugares), mas agora carregam o azul e o verde da marca,
   não mais o marinho+dourado genérico de antes. Escuro continua sendo o
   padrão (sem precisar de data-theme) -- claro é a variante alternativa. */
:root{
  --bg:#081A30;
  --bg-2:#0D2444;
  --surface:#11294C;
  --surface-2:#163460;
  --border:#254A82;
  --border-soft:#1B3764;
  --text:#EFF3FA;
  --muted:#8FA0BE;
  --accent:#4CC26B;
  --accent-2:#2FA855;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(76,194,107,.16);
  --accent-glow:rgba(76,194,107,.35);
  --danger:#FB7185;
  --danger-soft:rgba(251,113,133,.12);
  --success:#34D399;
  --navy:#1C3F9E;
  --navy-soft:#2A51B0;
  --navy-text:#D7E2FA;
  --navy-text-muted:#9FB3DE;
  --navy-border:rgba(76,194,107,.22);
  --gold-bright:#4CC26B;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-sm:9px;
  --shadow-lg:0 30px 80px -26px rgba(0,0,0,.65);
  --shadow-sm:0 14px 32px -16px rgba(0,0,0,.55);
  --blob:rgba(76,194,107,.14);
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Source Serif 4',Georgia,serif;
}
:root[data-theme="light"]{
  --bg:#EEF3FB;
  --bg-2:#E3ECFA;
  --surface:#FFFFFF;
  --surface-2:#F3F7FD;
  --border:#D7E1F2;
  --border-soft:#E7EEF9;
  --text:#0B1C33;
  --muted:#5C6B85;
  --accent:#1E7A3C;
  --accent-2:#2C9A4C;
  --accent-ink:#FFFFFF;
  --accent-soft:rgba(30,122,60,.10);
  --accent-glow:rgba(30,122,60,.22);
  --danger:#C0293F;
  --danger-soft:rgba(192,41,63,.08);
  --success:#157F55;
  --navy:#16316B;
  --navy-soft:#1F418A;
  --navy-text:#CBDAF2;
  --navy-text-muted:#8FA0BE;
  --navy-border:rgba(76,194,107,.22);
  --gold-bright:#2C9A4C;
  --shadow-lg:0 30px 70px -30px rgba(11,28,51,.18);
  --shadow-sm:0 12px 28px -16px rgba(11,28,51,.14);
  --blob:rgba(30,122,60,.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; letter-spacing:-.003em;
}
::selection{background:var(--accent); color:var(--accent-ink);}

/* ---------- fundo: gradiente marinho profundo + brilhos dourados à deriva ---------- */
.nv-bg{
  position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
  background:radial-gradient(ellipse 120% 80% at 50% -10%, var(--bg-2), var(--bg) 60%);
}
.nv-bg::before,.nv-bg::after{
  content:""; position:absolute; width:58vmax; height:58vmax; border-radius:50%;
  background:radial-gradient(circle, var(--blob), transparent 68%);
  filter:blur(10px); animation:nvDrift 26s ease-in-out infinite alternate;
}
.nv-bg::before{ top:-26vmax; left:-10vmax; }
.nv-bg::after{ bottom:-28vmax; right:-12vmax; animation-duration:32s; animation-delay:-9s; }
@keyframes nvDrift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4vmax,3vmax) scale(1.08); }
  100%{ transform:translate(-3vmax,-2vmax) scale(.96); }
}
@media (prefers-reduced-motion:reduce){ .nv-bg::before,.nv-bg::after{ animation:none; } }
/* snippets antigos ainda referenciam essas classes -- mantidas vazias de
   propósito pra não quebrar nada, sem desenhar scanline/sweep nenhum */
.nv-scanlines,.nv-sweep{ display:none; }

/* ---------- brilho que segue o cursor (superfícies marinho) ---------- */
.nv-spotlight{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.nv-spotlight::before{
  content:""; position:absolute; width:620px; height:620px; border-radius:50%;
  left:calc(var(--mx, 50%) - 310px); top:calc(var(--my, 50%) - 310px);
  background:radial-gradient(circle, rgba(76,194,107,.18), transparent 70%);
  opacity:0; transition:opacity .4s ease;
}
.nv-spotlight.active::before{ opacity:1; }

/* ---------- ondulação ao clicar (botões) ---------- */
.nv-rippling{ position:relative; overflow:hidden; }
.nv-ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.45); animation:nvRipple .55s ease-out forwards;
}
:root:not([data-theme="light"]) .nv-ripple{ background:rgba(76,194,107,.35); }
@keyframes nvRipple{ to{ transform:scale(1); opacity:0; } }

/* ---------- inclinação 3D sutil ao passar o mouse ---------- */
.nv-tilt{ transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform; }

/* ---------- cartão / superfície padrão ---------- */
.nv-glass{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}
.nv-corners{ position:relative; }
.nv-corners::before{ content:none; }

.nv-eyebrow{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
.nv-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--success); box-shadow:0 0 0 3px var(--accent-soft); }

.nv-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-body);
  font-weight:700; font-size:14px; padding:13px 22px; color:var(--accent-ink);
  background:linear-gradient(135deg, var(--gold-bright), var(--accent-2));
  box-shadow:0 14px 30px -14px var(--accent-glow);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.nv-btn:hover{ transform:translateY(-1px); box-shadow:0 18px 36px -14px var(--accent-glow); filter:brightness(1.04); }
.nv-btn:active{ transform:translateY(0); filter:brightness(.98); }

.nv-input{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:14.5px; font-family:var(--font-body);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.nv-input::placeholder{ color:var(--muted); }
.nv-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); background:var(--surface); }

/* switch modo dia/noite */
.nv-switch{
  --w:46px; --h:25px;
  position:relative; width:var(--w); height:var(--h); border-radius:999px; cursor:pointer;
  border:1.5px solid var(--border); background:var(--surface-2);
  transition:background .2s ease, border-color .2s ease; flex-shrink:0;
}
.nv-switch .thumb{
  position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-bright), var(--accent-2)); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 8px -2px var(--accent-glow);
}
.nv-switch .thumb svg{ width:11px; height:11px; transition:transform .5s cubic-bezier(.16,1,.3,1); }
:root:not([data-theme="light"]) .nv-switch{ background:var(--accent-soft); border-color:var(--accent); }
:root:not([data-theme="light"]) .nv-switch .thumb{ transform:translateX(21px); }
:root:not([data-theme="light"]) .nv-switch .thumb svg{ transform:rotate(-360deg); }

/* ---------- indicador líquido (navegação de abas) ---------- */
.nv-pill-glow{
  position:absolute; z-index:0; border-radius:999px; pointer-events:none; opacity:0;
  background:linear-gradient(135deg, var(--gold-bright), var(--accent-2));
  box-shadow:0 8px 20px -10px var(--accent-glow);
  transition:left .38s cubic-bezier(.16,1,.3,1), width .38s cubic-bezier(.16,1,.3,1),
             top .38s cubic-bezier(.16,1,.3,1), height .38s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}

.nv-fade-up{ animation:nvFadeUp .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes nvFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.nv-mono{ font-family:var(--font-body); }
.nv-glow-text{ text-shadow:none; }